CSS表單-文本輸入框美化CSS教程

CSS表單-文本輸入框美化CSS教程
[code]昨天我做了一個表單範本給大家看，眩目漂亮的時尚表單範本，今天我就來仔細分解一下文本輸入框的美化步驟，高手就飄過了。 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文本輸入框基本成型，大家可以運行下面的代碼看看最後效果。

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/nxbin/archive/2009/01/17/3798029.aspx