在网上看到一个搜索框，比较漂亮现在实现以下。中间涉及一两个特殊的不常用的CSS知识。大家可以涨下姿势。
分析
搜索框通常是一个表单，由三部分组成
- 输入框
- 提交按钮
- 小三角
HTML实现
上图可见，HTML实现非常简单，如下所示：
<form action="#">
<input type="text" placeholder="Search here...">
<button type="submit">
<i class="triangle"></i>
SEARCH
</button>
</form>
说明：小三角作为按钮的一部分，就放在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伪对象来实现。
- 把
<i class="triangle"></i>删除。 - 把
.triangle改为input:before,并且加上属性content: "";
欢迎小伙伴提问。
