用css3制作一个搜索框效果

搜索框的形式有多种多样，今天试着用css3做了一个搜索框，

html代码如下：

css代码如下：

body {
   background:#eee;
   font:12px 'Lucida sans', Arial, Helvetica;
   color:#333;
   text-align:center;
}
a {
   color: #2A679F;
}
.form-wrapper {
   width:450px;
   padding:8px;
   margin:10px auto;
   overflow:hidden;
   border-width: 1px;
   border-style: solid;
   border-color: #dedede #bababa #aaa #bababa;
   -moz-box-shadow:0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
   -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
   box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   background-color: #f6f6f6;
   background-image:-webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
   background-image:-webkit-linear-gradient(top, #f6f6f6, #eae8e8);
   background-image:-moz-linear-gradient(top, #f6f6f6, #eae8e8);
   background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
   background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
   background-image: linear-gradient(top, #f6f6f6, #eae8e8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f6f6f6', endColorstr='#eae8e8'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f6f6f6', endColorstr='#eae8e8')"; /* IE8 */
}
.form-wrapper #search {
   width:330px;
   height:20px;
   padding:10px 5px;
   float:left;
   font:bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
   border:1px solid #ccc;
   -moz-box-shadow:0 1px 1px #ddd inset, 0 1px 0 #fff;
   -webkit-box-shadow:0 1px 1px #ddd inset, 0 1px 0 #fff;
   box-shadow:0 1px 1px inset, 0 1px 0 #fff;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   border-radius:3px;
}
.form-wrapper #search:focus {
   outline:0;
   border-color:#aaa;
   -moz-box-shadow:0 1px 1px #bbb inset;
   -webkit-box-shadow:0 1px 1px #bbb inset;
   box-shadow:0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder, .form-wrapper #search::-moz-placeholder, .form-wrapper #search::-ms-input-placeholder {
color:#999;
font-weight:normal;
}
.form-wrapper #submit {
   float:right;
   border:1px solid #00748f;
   height:42px;
   width:100px;
   padding:0;
   cursor:pointer;
   font:bold 15px Arial, Helvetica, sans-serif;
   color:#fafafa;
   text-transform:uppercase;
   background-color:#0483a0;
   background-image:-webkit-gradient(linear, left left bottom, from(#31b2c3), to(#0483a0));
   background-image:-webkit-linear-gradient(top, #31b2c3, #0483a0);
   background-image:-moz-linear-gradient(top, #31b2c3, #0483a0);
   background-image:-o-linear-gradient(top, #31b2c3, #0483a0);
   background-image: linear-gradient(top, #31b2c3, #0483a0);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#31b2c3', endColorstr='#0483a0'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#31b2c3', endColorstr='#0483a0')"; /* IE8 */
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   border-radius:3px;
   text-shadow:0 1px 0 rgba(0,0,0,.3);
   -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 1px 0 #fff;
   -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 1px #fff;
   box-shadow:0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
   background-color:#31b2c3;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
   background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
   background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
   background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
   background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
   background-image: linear-gradient(top, #0483a0, #31b2c3);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0483a0', endColorstr='#31b2c3'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0483a0', endColorstr='#31b2c3')"; /* IE8 */
}
.form-wrapper #submit:active {
        outline: 0;
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    }
   .form-wrapper #submit::-moz-focus-inner {
        border: 0;
    }

预览效果：

1，在ie6/7/8中：

2.在firefox. chrome中预览效果：

用css3制作一个搜索框效果相关推荐

[html] 写一个搜索框，聚焦时搜索框向左拉长并有动画效果
[html] 写一个搜索框,聚焦时搜索框向左拉长并有动画效果为啥直接粘贴html发布以后就没有了呢个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
ae怎么做圆一圈圈扩散效果_轻备学院AE特效基础教程 - 如何制作一个带有动画效果村庄烟雾...
熟练运用AE软件做几个偏技巧性并且可以举一反三的超简单小动画,教大家如何制作一个带有动画效果村庄烟雾,你学会了这些小动画,不仅可以熟练运用AE软件,还能对动画制作有深入的了解. 第一步:在AI中绘制插 ...
用css3制作一个Music Player Menu
用css3制作一个Music Player Menu,主要应用了css3 的box-shadow,border-radius,text-shadow,grident,等属性 html代码如下: < ...
用CSS3制作一个风车
开发工具与关键技术:用CSS3制作一个风车作者:李波首先我的风车html如下: Css部分:需要给四个叶子的设置其对应的样式:首先是第一页的叶子如下图(这里展示第一个叶子的样式),为了突出效果我将 ...

用css3制作一个搜索框效果

用css3制作一个搜索框效果相关推荐

最新文章

热门文章