html输入框源码,自制样式美观的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

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

并附上完整实现代码：

自制search搜索框组件

.searchBlock{

width: 110px;

border:solid 1px #ddd;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-khtml-border-radius: 5px;

}

.searchBlock span{

float: left;

}

.searchText{

border: none;

width: 80px;

margin: 2px 5px;

outline: 0 none;

}

.searchBtn{

border: none;

width: 16px;

height: 16px;

cursor: pointer;

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

background-repeat: no-repeat;

display: inline;

margin: 2px 0px;

}

搜索图片如下：

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