在網(wǎng)頁中，表單是十分常見的元素。對(duì)于開發(fā)者們而言，如何美化表單成為了一個(gè)細(xì)節(jié)問題。而 CSS 就是美化表單的利器之一。利用 CSS 可以非常方便地讓表單看起來更加美觀、整潔。

下面我們來看一個(gè)用 CSS 制作表單的例子：

<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<label for="email">郵箱:</label>
<input type="email" id="email" name="email">
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="提交">
</form>

該表單包括三個(gè)輸入框和一個(gè)提交按鈕。使用 CSS，我們可以將其美化如下：

form label {
display: block; /* 將標(biāo)簽變成塊級(jí)元素 */
margin-top: 10px; /* 添加上外邊距，改變排列位置 */
font-weight: bold; /* 加粗 */
}
form input[type="text"], form input[type="email"], form textarea {
display: block; /* 將輸入框和文本域變成塊級(jí)元素 */
width: 100%; /* 占用整個(gè)父元素寬度 */
margin-top: 5px; /* 添加上外邊距 */
padding: 10px 20px; /* 添加內(nèi)邊距，使其看起來更順眼 */
border: none; /* 去掉邊框 */
background-color: #f2f2f2; /* 設(shè)置背景色，讓其更美觀 */
}
form textarea {
height: 150px; /* 特殊處理文本域的高度 */
}
form input[type="submit"] {
background-color: #5cb85c; /* 設(shè)置按鈕背景色 */
color: #fff; /* 設(shè)置按鈕文字顏色 */
border: none; /* 去掉邊框 */
padding: 10px 20px; /* 添加內(nèi)邊距，與輸入框保持一致 */
margin-top: 10px; /* 添加上外邊距 */
cursor: pointer; /* 改變光標(biāo)形狀 */
transition: background-color .3s ease-in-out; /* 添加過渡效果 */
}
form input[type="submit"]:hover {
background-color: #449d44; /* 鼠標(biāo)懸停時(shí)背景色變化 */
}

運(yùn)行效果如下：