css装饰文本框input

时间:2024-04-15 16:25:50
在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;
}