CSS3立体搜索框的实现-chunzhisu-ChinaUnix博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

博客访问： 76720
博文数量： 73
博客积分： 0
博客等级：民兵
技术积分： 740
用户组：普通用户
注册时间： 2014-07-04 16:50

文章分类

全部博文（73）

网页特效（73）
未分配的博文（0）

文章存档

2014年（73）

我的朋友

最近访客

推荐博文

CSS3立体搜索框的实现

分类： Html/Css

2014-07-08 10:52:28

CSS3代码编写实现的立体搜索框效果，使用有一张背景图片，但搜索框完全是CSS3代码实现的，没有用JS。我觉得对学习CSS3或许是有帮助的，希望新手参阅哦。
点击(此处)折叠或打开
1. <!DOCTYPE html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4. <title></title>
5. <style>
6. html, body{padding: 0;margin: 0;}
7. html{background: #f8f4e8 url("/jscss/demoimg/201312/bg_tile.jpg") left top repeat;}
8. body{font: 16px/1.5 Calibri, Helvetica, Arial, sans-serif;}
9. #wrapper{width: 430px;margin: 200px auto;}
10. h1{font-family: 'Oswald', Calibri, "Helvetica Neue", Arial, serif;font-size: 54px;font-weight: bold;}
11. p{color: #545454;margin-top: 50px;}
12. a{text-decoration: none;color: #000;padding-bottom: 1px;}
13. a: hover, a: focus{border-bottom: 1px dotted #000;}
14. #main{width: 400px;height: 50px;background: #f2f2f2;padding: 6px 10px;border: 1px solid #b5b5b5;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;}
15. input[type="text"]{float: left;width: 230px;padding: 15px 5px 5px 5px;margin-top: 5px;margin-left: 3px;border: 1px solid #999999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;-webkit-box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;box-shadow: inset 0 5px 0 #ccc, inset 0 6px 0 #989898, inset 0 13px 0 #dfdede;}
16. input[type="submit"].solid{float: left;cursor: pointer;width: 130px;padding: 8px 6px;margin-left: 20px;background-color: #f8b838;color: rgba(134, 79, 11, 0.8);text-transform: uppercase;font-weight: bold;border: 1px solid #99631d;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(64, 38, 5, 0.9);-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-transition: background 0.2s ease-out;}
17. input[type="submit"].solid: hover, input[type="submit"].solid: focus{background: #ffd842;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.9), inset 0 2px 1px rgba(255, 250, 76, 0.8), 0 5px 0 #d8a031, 0 6px 0 #593a11, 0 13px 0 #ccc;}
18. input[type="submit"].solid: active{background: #f6a000;position: relative;top: 5px;border: 1px solid #702d00;-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc;}
19. </style>
21. </head>
22. <body>
23. <section id="wrapper">
24. <h1>CSS3 搜索框 Field</h1>
25. <div id="main">
26. <form>
27. <input type="text" id="search" value="请输入……">
28. <input type="submit" class="solid" value="Search">
29. </form>
30. </div>
31. </section>
32. </body>
33. </html>

阅读(398) | 评论(0) | 转发(0) |

上一篇：CSS自动加序号-多种有序列表数字序号效果

下一篇：CSS控制表格打印

给主人留下些什么吧！~~

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6