css裝飾文本框input

在web程序前端頁面中，<input>恐怕是用的最多的html元素了，各個須要錄入信息的場合都會用到它，通常都會用css來修飾一下使得它更好看。

原始的不加修飾的文本框像下面，有些單調，頁面不是很好看。如今咱們加一些css，將它修飾一下。

一、先加一個寬度，讓文本框的寬度獲得控制。

    width:320px;

二、爲了防止內邊距、邊框使文本框寬度和width值不一樣，須要加上下面的元素。

    box-sizing:border-box;

三、文本框的邊框太纖細了，修改一下。

    border:1px solid #ccc;

四、加一個內邊距，使得輸入框被撐得高一些，由於2中的設置，這不會影響文本框的寬度。

    padding:5px;

五、文本框的四個角都是直角，給它加一點弧度。

    border-radius:3px;

六、再設置一下字體的尺寸。

    font-size:14;

七、最後再加一個字體的設置。

    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;

}