自制样式美观的input组件（以search输入框为例，含源码）

阅读本文前，读者需要有一定的html + css的技术功底。

不说废话，先附上search输入框的成果截图：

分析：

1. 组件分解：分解为如下几个部分：

1）外层：增加一个容器，如div

2）内层：

一个input输入框

一个按钮

2. 设置样式：

1）容器样式

增加border属性，样式代码：

border: solid 1px #ddd;

增加border圆角边框，样式代码：

border-radius: 5px

2）输入框样式

去除border样式：

border: none

去除轮廓样式：

outline: 0 none;

3）按钮样式

同样，去除border样式

border: none

给按钮增加搜索背景图片样式：

background-image: url("images/ico_sear.gif");
background-repeat: no-repeat; 

设置display样式为：inline

这样分解完，相信大家就很容易理解了。

并附上完整实现代码：

搜索图片如下：

通过这样的一个实例，我们也可以做出很多类似的组件了。