很漂亮的CSS提交表单，大家先看看
CSS代码：
CSS Code复制内容到剪贴板 body{padding:50px100px;font:13px/150%Verdana,Tahoma,sans-serif;} /*tutorial*/ input,textarea{ padding:9px; border:solid1px#E5E5E5; outline:0; font:normal13px/100%Verdana,Tahoma,sans-serif; width:200px; background:#FFFFFFurl('bg_form.png')lefttoprepeat-x; background:-webkit-gradient(linear,lefttop,left25,from(#FFFFFF),color-stop(4%,#EEEEEE),to(#FFFFFF)); background:-moz-linear-gradient(top,#FFFFFF,#EEEEEE1px,#FFFFFF25px); box-shadow:rgba(0,0,0,0.1)0px0px8px; -moz-box-shadow:rgba(0,0,0,0.1)0px0px8px; -webkit-box-shadow:rgba(0,0,0,0.1)0px0px8px; } textarea{ width:400px; max-width:400px; height:150px; line-height:150%; } input:hover,textarea:hover, input:focus,textarea:focus{ border-color:#C9C9C9; -webkit-box-shadow:rgba(0,0,0,0.15)0px0px8px; } .formlabel{ margin-left:10px; color:#999999; } .submitinput{ width:auto; padding:9px15px; background:#617798; border:0; font-size:14px; color:#FFFFFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
html代码:
XML/HTML Code复制内容到剪贴板 <!DOCTYPE> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headprofile="http://gmpg.org/xfn/11"> <title>CSS3FormDemo</title> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <linkrel="stylesheet"href="demo.css"type="text/css"media="all"/> </head> <body> <formclass="form"> <pclass="name"> <inputtype="text"name="name"id="name"/> <labelfor="name">Name<span>图</span><i>库</i></label> </p> <pclass="email"> <inputtype="text"name="email"id="email"/> <labelfor="email">E-mail<span>图</span><i>库</i></label> </p> <pclass="web"> <inputtype="text"name="web"id="web"/> <labelfor="web">Website<span>图</span><i>库</i></label> </p> <pclass="text"> <textareaname="text"></textarea> </p> <pclass="submit"> <inputtype="submit"value="Send"/> </p> </form> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【纯CSS实现漂亮的提交表单】相关文章：