纯CSS实现漂亮的提交表单
很漂亮的CSS提交表单，⼤家先看看
CSS代码：
CSS Code复制内容到剪贴板
1. body { padding:50px 100px; font:13px/150% Verdana, Tahoma, sans-serif; }
2.
3. /* tutorial */
4.
5. input, textarea {
6.  padding: 9px;
7.  border: solid 1px #E5E5E5;
8.  outline: 0;
9.  font: normal 13px/100% Verdana, Tahoma, sans-serif;
10.  width: 200px;
11.  background: #FFFFFF url('bg_form.png') left top repeat-x;
12.  background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
13.  background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
14.  box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
15.  -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
16.  -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
17.  }
18.
19. textarea {
20.  width: 400px;
21.  max-width: 400px;
22.  height: 150px;
23.  line-height: 150%;
24.  }
25.
26. input:hover, textarea:hover,
27. input:focus, textarea:focus {
28.  border-color: #C9C9C9;
29.  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
30.  }
31.
32. .form label {
33.  margin-left: 10px;
34.  color: #999999;
35.  }
36.
37. .submit input {
38.  width: auto;
39.  padding: 9px 15px;
40.  background: #617798;
41.  border: 0;
42.  font-size: 14px;
43.  color: #FFFFFF;
44.  -moz-border-radius: 5px;
45.  -webkit-border-radius: 5px;
46.  }
html代码:
XML/HTML Code复制内容到剪贴板
1. <!DOCTYPE>
2. <html xmlns="www.w好看的css代码
3. <head profile="/xfn/11">
4. <title>CSS3 Form Demo</title>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6. <link rel="stylesheet" href="demo.css" type="text/css" media="all" />
7. </head>
8. <body>
9. <form class="form">
10.  <p class="name">
11.    <input type="text" name="name" id="name" />
12.    <label for="name">Name<span>图</span><i>库</i></label>
13.  </p>
14.  <p class="email">
15.    <input type="text" name="email" id="email" />
16.    <label for="email">E-mail<span>图</span><i>库</i></label>
17.  </p>
18.  <p class="web">
19.    <input type="text" name="web" id="web" />
20.    <label for="web">Website<span>图</span><i>库</i></label>
21.  </p>
22.  <p class="text">
23.    <textarea name="text"></textarea>
24.  </p>
25.  <p class="submit">
26.    <input type="submit" value="Send" />
27.  </p>
28. </form>
29.
30.
31. </body>
32. </html>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。