CSS3效果：优雅搜索框

在网上看到一个搜索框，比较漂亮现在实现以下。中间涉及一两个特殊的不常用的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: "";

点击获取完整代码

欢迎小伙伴提问。