HTML表單的外觀可以用CSS大大提高：
造型輸入字段
使用width屬性來確定輸入欄的寬度：
上面的例子適用於所有<input>元素。 如果你只想風格特定輸入類型，你可以使用屬性選擇：
-
input[type=text]-將只選擇文本字段 -
input[type=password]-將只選擇密碼字段 -
input[type=number]-將只選擇一些領域 - 等等..
加厚輸入
使用padding屬性添加文本字段內部空間。
提示：當您以後彼此有很多的投入，你可能還需要增加一些margin ，給他們之外增加更多的空間：
 | 請注意，我們已經設置了box-sizing屬性border-box 。 這可以確保在填充和最終的邊界都包含在元素的總寬度和高度。 了解更多關於 box-sizing在我們的財產CSS3框大小調整的篇章。 |
|---|
界定輸入
使用border屬性來更改邊框的大小和顏色，並使用border-radius屬性添加圓角：
如果你只想要一個底部邊框，使用border-bottom性質：
彩色輸入
使用background-color屬性添加背景顏色的輸入端，而color屬性來更改文本顏色：
聚焦輸入
默認情況下，一些瀏覽器將添加一個藍色的輪廓周圍的輸入時，它獲得焦點（點擊）。 您可以刪除通過添加這種行為outline: none;到輸入端。
使用:focus選擇做一些與輸入字段，當它獲得焦點：
輸入使用圖標/圖片
如果你想輸入一個內部圖標，使用background-image屬性，並將其與位置background-position屬性。 還要注意，我們添加了一個大左填充保留圖標的空間：
例
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} 試一試» 動畫搜索輸入
在這個例子中，我們使用CSS3 transition性質的動畫時，它獲得焦點搜索輸入的寬度。 您將了解更多有關transition性質後，在我們的CSS3過渡章節。
例
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} 試一試» 文本域樣式
提示：使用resize屬性來防止文字區域被調整（禁止在右下角的“抓取”）：
例
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
} 試一試» 造型選擇菜單
例
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} 試一試» 造型輸入按鈕
例
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */ 試一試» 有關如何式按鍵與CSS的更多信息，請閱讀我們的CSS教程按鈕 。