css装饰文本框input

在web程序前端页面中，<input>恐怕是用的最多的html元素了，各个需要录入信息的场合都会用到它，一般都会用css来修饰一下使得它更好看。

原始的不加修饰的文本框像下面，有些单调，页面不是很好看。现在我们加一些css，将它修饰一下。

1、先加一个宽度，让文本框的宽度得到控制。

    width:320px;

2、为了防止内边距、边框使文本框宽度和width值不同，需要加上下面的元素。

    box-sizing:border-box;

3、文本框的边框太纤细了，修改一下。

    border:1px solid #ccc;

4、加一个内边距，使得输入框被撑得高一些，因为2中的设置，这不会影响文本框的宽度。

    padding:5px;

5、文本框的四个角都是直角，给它加一点弧度。

    border-radius:3px;

6、再设置一下字体的尺寸。

    font-size:14;

7、最后再加一个字体的设置。

    font- family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;

最后出来的效果如下图所示。虽然还是比较朴素，但比原来是不是好了很多？

当然,因为总是会有多个input输入框，不可能每个输入框单独设置这些css属性，最好写成类。

.s1{

    width:320px;

    box-sizing:border-box;

    border:1px solid #ccc;

    padding:5px;

    border-radius:3px;

    font-size:14;

    font- family:"Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","        Microsoft Yahei",sans-serif;

}