html搜索框有效果,CSS3效果：优雅搜索框

在网上看到一个搜索框，比较漂亮现在实现以下。中间涉及一两个特殊的不常用的CSS知识。大家可以涨下姿势。

分析

搜索框通常是一个表单，由三部分组成

输入框

提交按钮

小三角

HTML实现

上图可见，HTML实现非常简单，如下所示：

SEARCH

说明：小三角作为按钮的一部分，就放在button，然后使用定位方式定位到按钮外部。

CSS实现

为了简单演示，这里只是用标签选择器，真实使用中，请使用其他的选择器。

输入框样式

input{

height: 40px;

width: 330px;

padding-left: 10px;

background-color: #eee;

border-radius: 4px 0 0 4px;

border: none;

}

提交按钮样式

button{

height: 40px;

width: 110px;

background-color: #d24040;

border: none;

border-radius: 0 4px 4px 0;

color: #fff;

font-weight: bold;

}

小三角的样式

.triangle{

display: inline-block;

border: 6px solid transparent;

border-right-color:#000;

}

现在小三角暂时使用黑色，等调整完位置后，再换颜色。

下面调整小三角与提交按钮的位置了。

给提交按钮加上相对定位。

position: relative;

给小三角加上绝对定位，并且移动到合适位置。

position: absolute;

right:100%;

top:14px;

改变小三角的颜色

border-right-color:#d24040;

优化

1. 输入框与提交按钮间距

这个因为标签之间的换行引入的空格，处理方式，是在他们的父标签上，加上font-size:0;。

form{

font-size:0;

}

2. 提交按钮

鼠标放在提交按钮上，没有变化，用户体验不好，可以改变为点击小手形状。给提交按钮加上如下属性，改变鼠标形状。

cursor: pointer;

在Chrome单击按钮总会出现浅色的边框，效果很差。

给提交按钮和输入框加上如下属性，去除外边框。

input,button{

outline: none;

}

3. 输入框

输入框内提示字符串是斜体。这个没有标准的CSS属性控制，但是各个浏览器提供各自的伪类/伪对象实现。

input::-webkit-input-placeholder{

font-style: italic;

}

input:-moz-placeholder{

font-style: italic;

}

input:-ms-input-placeholder{

font-style: italic;

}

说明：

CSS2伪类伪对象都是使用:(例如：:hover伪类，:before伪对象)。但是从CSS3开始，:表示伪类，::表示伪对象的(例如：:hover伪类，::before伪对象)。

::-webkit-input-placeholder是Chrome定义的伪对象，用来设置输入框提示文字的样式。:-moz-placeholder和:-ms-input-placeholder分别是FF和IE的伪类，也是用来设置输入框提示文字的样式。

升级

小三角只作为按钮的修饰，那么可以使用按钮的:before伪对象来实现。

把删除。

把.triangle改为input:before,并且加上属性content: "";

欢迎小伙伴提问。