html5表单的css修饰,使用HTML5和CSS3美化表单

body

margin:0px;

padding:0px;

font:14px/21px "Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;

}

.contact_form h2,.contact_form label{font-family:Georgia,Times,"Times New Roman",serif;}

.form_hint,.required_notification{font-size:11px;}

*:focus{outline:none;}

::-webkit-input-placeholder{color:blue;}

:-moz-placeholder{color:blue;}

:-o-placeholder{color:blue;}

:ms-placeholder{color:blue;}

/*列表样式*/

.contact_form ul{

width:750px;

list-style-type:none;

list-style-position:outside;

margin:0px;padding:0px;

}

.contact_form li{

padding:12px;

border-bottom:1px solid #EEE;

position:relative;

}

.contact_form li:first-child,.contact_form li:last-child{

border-bottom:1px solid #777;

}

/*表头样式*/

.contact_form h2{

margin:0px;

display:inline;

}

.required_notification{

color:#d45252;

margin:5px 0 0 0;

display:inline;

float:right;

}

/*表单输入样式*/

.contact_form label{

width:150px;

margin-top:3px;

display:inline-block;

float:left;

padding:3px;

}

.contact_form input{

height:20px;

width:220px;

padding:5px 8px;

}

.contact_form textarea{

padding:8px;width:300px;

}

.contact_form button{

margin-left:156px;

}

.contact_form input,.contact_form textarea{

border:1px solid #AAA;

box-shadow:0px 0px 3px #CCC,0px 10px 15px #eee inset;

border-radius:5px;

padding-right:30px;

-moz-transition:padding .25s;

-webkit-transition:padding .25s;

-o-transition:padding .25s;

transition:padding .25s;

}

input:required,textarea:required{

background:#fff url(ldent.png) no-repeat 98% center;

}

.contact_form input:focus,.contact_form textarea:focus{

border:1px solid #aaa;

box-shadow:0px 0px 5px #eee;

padding-right:70px;

}

.contact_form input:focus:invalid,.contact_form textarea:focus:invalid{

background:#fff url(must.png) no-repeat 98% center;

border:1px solid #E01F1F;

box-shadow:0px 0px 5px #E01F1F;

}

.contact_form input:required:valid,.contact_form textarea:required:valid{

background:#FFF url(dui.png) no-repeat 98% center;

box-shadow:0 0 5px #5cd053;

border-color:#28921f;

}

/*按钮样式*/

button.submit{

background-color:#68b12f;

background:-webkit-gradient(linear,left top,left bottom,form(#68b12f),to(#50911e));

background:-webkit-linear-gradient(top,#68b12f,#50911e);

background:-moz-linear-gradient(top,#68b12f,#50911e);

background:-ms-linear-gradient(top,#68b12f,#50911e);

background:-o-linear-gradient(top,#68b12f,#50911e);

background:linear-gradient(top,#68b12f,#50911e);

border:1px solid #50911e;

border-bottom:1px solid #5b992b;

border-radius:3px;

-webkit-border-radius:3px;

-moz-border-radius:3px;

-ms-border-radius:3px;

-o-border-radius:3px;

box-shadow:inset 0 1px 0 0 #9fd574;

-webkit-box-boxshaow:0 1px 0 0 #9fd574;

-moz-box-boxshaow:0 1px 0 0 #9fd574;

-ms-box-shadow:0 1px 0 0 #9fd574;

-o-box-shadow:0 1px 0 0 #9fd574;

color:white;

font-weight:bold;

padding:6px 20px;

text-align:center;

text-shadow:0 -1px 0 #396715;

letter-spacing:5px;

text-indent:5px;

}

button.submit:hover{

opacity:.85;

cursor:pointer;

}

button.submit:active{

border:1px solid #20911e;

box-shadow:0px 0px 10px 5px #356b0b inset;

-webkit-box-shadow:0px 0px 10px 5px #356b0b inset;

-moz-box-shadow:0px 0px 10px 5px #356b0b inset;

-ms-box-shadow:0px 0px 10px 5px #356b0b inset;

-o-box-shadow:0px 0px 10px 5px #356b0b inset;

}

.form_hint{

background:#d45252;

border-radius:3px 3px 3px 3px;

color:white;

margin-left:10px;

padding:5px 6px;

z-index:999;

position:absolute;

display:none;

}

.form_hint::before{

content:url(triangle.png);

color:#d45252;

position:absolute;

top:1px;

left:-12px;

}

.contact_form input:focus + .form_hint{display:inline;}

.contact_form input:required:valid + .form_hint{background:#28921f;}

.contact_form input:required:valid + .form_hint::before{color:#28921f;content:url(triangle_1.png)}

• 联系我们

  *表示必填项

• 姓名：

• 邮箱：

  正确格式为：javin@example.com

• 网站：

  正确格式为：http://www.baidu.com

• 留言：

• 提交

效果图：