css表单

具有亲和力的表单样色，兼容IE和firefox下正常显示。

先看看效果：

form.jsp

<% @ page contentType = " text/html; charset=utf-8 "  language = " java "  import = " java.sql.* "  errorPage = ""   %>
< script  type ="text/javascript"  src ="../common/js_css/form.js" ></ script >
< link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="../common/js_css/form.css"   />

< div  class ="replyForm" >
< form  id =""  name =""  class ="cmxform"  method ="post"  action ="" >
     < p  class ="pLeft" > 星号的为必填部分  < em > * </ em ></ p >
     < fieldset >
         < legend  align ="center" > 发表评论 </ legend >
         < ol >
             < li >< label  for ="zt" >< em > * </ em > 昵称： </ label >   < input  id ="zt"  name ="zt"  width ="50%"   /></ li >
             < li >< label  for ="zt" >< em > &nbsp;&nbsp; </ em > 密码： </ label >   < input  id ="zt"  name ="zt"  width ="50%"   /> 游客发言不需要密码. </ li >
             < li >< label  for ="zt" >< em > * </ em > 验证码： </ label >   < input  id ="zt"  name ="zt"  width ="50%"   /></ li >
             < li >< label  for ="comments" >< em > * </ em > 内容： </ label >   < textarea  id ="nr"  name ="nr"  style ="width:75%; height:200px;" ></ textarea ></ li >
         </ ol >
     </ fieldset >
     < p >< input  type ="button"  id ="SubmitButton"  name ="SubmitButton"  onclick ="SubmitForm('messageForm')"  value ="发表评论"   />< input  type ="reset"  value ="重写" ></ p >
     < p  class ="pRight" > 虽然发表评论不用注册，但是为了保护您的发言权，建议您 < a  tip =""  href ="http://suncss.com/register.asp" > 注册帐号 </ a ></ p >
</ form >
</ div >

 

form.css

@import "formReset.css";

@import "formStyle.css";

 

formReset.css

/* *********************************
Use: Reset Styles for all browsers
Author: ison
********************************** */
a img, iframe  {  border :  none ;   }
/*
Headers------------------------------ */
h1, h2, h3, h4, h5, h6  { margin :  0 ;     padding :  0 ;     font-size :  100% ; }
/*
Lists------------------------------ */
ul, ol, dl, li, dt, dd  { margin :  0 ;     padding :  0 ; }
/*  
Links------------------------------ */
a, a:link  {}
a:visited  {}
a:hover  {}
a:active  {}
/*  
Forms------------------------------ */
form, fieldset  { margin :  0 ;     padding :  0 ; }
fieldset  {  border :  1px solid #000 ;   }
legend  { padding :  0 ; color :  #000 ; }
input, textarea, select  { margin :  0 ;     padding :  1px ; font-size :  100% ; font-family :  inherit ; }
select  {  padding :  0 ;   }

/* *********************************
Use: Core Styles
********************************** */
p  {  margin :  10px 0 ;   }
.sr  {
    position :  absolute ;
    left :  -9999em ;
    top :  0 ;
    width :  1px ;
    height :  1px ;
    overflow :  hidden ;
}

 

formStyle.css

/* *********************************
Use: cmxform Styles
Author: ison 
********************************** */
.divForm {  margin : 5px 0 0 5px ;  width : 96% ; }
form.cmxform  { width : 100% ;  height : 100% ; font-size :  1.1em ; color :  #333 ; }
form.cmxform p { text-align : center ; }
form.cmxform p.pLeft { text-align : left ; }
form.cmxform p.pRight { text-align : right ; }
form.cmxform legend  {  padding-left :  0 ;   }
form.cmxform legend,form.cmxform label  {  color :  #333 ;   }
form.cmxform fieldset  {
    border :  none ;
    border-top :  1px solid #C9DCA6 ;
    background :  url(../image/cmxform-fieldset.gif) left bottom repeat-x ;
}
form.cmxform fieldset fieldset  {  background :  none ;   }
form.cmxform fieldset li  {
    padding :  5px 10px 7px ;
    background :  url(../image/cmxform-divider.gif) left bottom repeat-x ;
}

/* *********************************
Use: cmxform template
Author: Nick Rigby
********************************** */
form.cmxform fieldset  {  margin-bottom :  10px ;   }
form.cmxform legend  { padding :  0 2px ; font-weight :  bold ; _margin :  0 -7px ;   /*  IE Win  */ }
form.cmxform label  { display :  inline-block ; line-height : 1.8 ; vertical-align : top ; }
form.cmxform fieldset ol  { margin :  0 ; padding :  0 ; }
form.cmxform fieldset li  { list-style :  none ; padding :  5px ; margin :  0 ; }
form.cmxform fieldset label  {  width : 12% ; }
.titleStyle {  width : 88% }
.inputStyle {  width : 88% }
form.cmxform fieldset fieldset  { border :  none ; margin :  3px 0 0 ; }
form.cmxform fieldset fieldset legend  { padding :  0 0 5px ; font-weight :  normal ; }
form.cmxform fieldset fieldset label  { display :  block ; width :  auto ; }
form.cmxform em  { font-weight :  bold ; font-style :  normal ; color :  #f00 ; }
form.cmxform label  {  width :  120px ;   }   /*  Width of labels  */
form.cmxform fieldset fieldset label  {  margin-left :  123px ;   }   /*  Width plus 3 (html space)  */
/* *//* / form.cmxform legend { display: inline-block; } /* IE Mac legend fix  */

 

脚本下载：form.js

背景图片：cmxform-divider.gif      cmxform-fieldset.gif