CSS表单-文本输入框美化CSS教程

六 11

css美化其实就是一个原理的问题，如果把原理搞清楚了，很多事情就容易明白了。

首先我们都知道文本输入框如果不做css美化，直接把它放在页面里面，很难和整体设计融合起来，这也是我们要做美化的主要原因。下面是一个input文本输入框的html代码：

现在我们就开始对其进行美化，这次做的教程是结合昨天的表单模板给大家做的详细分解，所以代码基本上还是参照昨天的表单模板。首先我们会对所有的input对象进行一个基本设定，把 margin,padding,border,font,float等基本元素进行一个设定，因为这个设定可以继承，所以如果是同样的设定我们在后续对继承的类或对象进行定义的时候就不用再写了，而只需要写出不一样的的地方即可以。下面我就把基本设定的css代码列出来。

INPUT
{
border-left: #fff 1px solid;
border-top: #fff 1px solid;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
margin: 0px 0px 15px 10px;
padding-left: 10px;
background: #ccc;
float: left;
font-size: 1em;
line-height: 1.5em;
height: 20px;
text-align: left;
}
这里我要解释一下，其实在我们经常使用css的过程中会用一些缩写的形式，这样的好处是能够减少 css代码的体积，但是就我的经验来看，其实缩写并不是最好的方式，当然在国内使用浏览器的种类比较少，所以在兼容性方面出现的问题比较小，但是在一些发达国家的浏览器使用的种类是很多的，经常容易出现缩写不识别的情况。我现在就注意到border和padding这2个属性的设置一般比较有经验的css 作者都会使用不缩写的方式，就比如上面看到的border设定分成了上下左右4个属性来写。

经过上面设定之后大家可以看到input 输入框已经基本上实现了平面效果，具体的分为3部分来了解：
1、边界背景部分

border-left: #fff 1px solid;
border-top: #fff 1px solid;
border-right: #fff 1px solid;
border-bottom: #fff 1px solid;
margin: 0px 0px 15px 10px;
padding-left: 10px;
background: #ccc;

2、浮动设置部分
float: left;

3、文字控制部分
font-size: 1em;
line-height: 1.5em;
height: 20px;
text-align: left;

大家有兴趣可以对上面的设定进行更改，然后再看效果就比较容易理解他们的含义了。
接下来我们还需要对输入框进行单独的设置定义，主要是定义输入框和基本input定义不相同的地方。大家看代码：

INPUT.textbox
{
margin: 0px 60px 8px 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
background: url(field.gif) repeat-x left 50%;
width: 270px;
color: #111;
}

这里大家注意到了我们重写了margin、padding-left和background属性，这样的话这3个属性就是以这里的最后的设置为准，另外我们还添加了宽度width属性和文字颜色color属性。使得整个input文本输入框基本成型，大家可以运行下面的代码看看最后效果。