纯纯CSS实现漂亮的提交表单实现漂亮的提交表单
主要为大家详细介绍了纯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.