CSS表單換行顏色

在網站開發中使用表單是非常常見的，然而當我們需要在表單中填寫較多的信息時，常常會出現表單過長的情況。

這時候可以使用CSS來控制表單的樣式，使表單更加美觀易讀。

其中，使用CSS來改變表單的顏色和換行方式也是一種常用的手段。

/* 改變表單的背景顏色 */
form {
background-color: #f2f2f2;
}
/* 改變表單輸入框的背景顏色 */
input[type=text], input[type=password], textarea {
background-color: #fff;
}
/* 改變表單的文字顏色 */
form label, input[type=text], input[type=password], textarea {
color: #333;
}
/* 改變表單的邊框顏色 */
input[type=text], input[type=password], textarea {
border: 2px solid #e5e5e5;
}
/* 改變表單的間距 */
form label, input[type=text], input[type=password], textarea {
margin-bottom: 10px;
}
/* 改變表單的換行方式 */
form label, input[type=text], input[type=password], textarea {
display: block;
}
/* 改變表單的字體大小 */
form label {
font-size: 16px;
}
input[type=submit] {
background-color: #f7f7f7;
border: 2px solid #e5e5e5;
padding: 10px 20px;
font-weight: bold;
text-transform: uppercase;
}
input[type=submit]:hover {
background-color: #e5e5e5;
cursor: pointer;
}

以上CSS代碼可以改變表單背景顏色、輸入框背景顏色、文字顏色、邊框顏色、間距、換行方式和字體大小。

除此之外，我們還可以使用偽類（pseudo-class）來改變表單的樣式。

/* 改變表單輸入框獲得焦點時的樣式 */
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 2px solid #4CAF50;
}
/* 改變表單輸入框鼠標懸停時的樣式 */
input[type=text]:hover, input[type=password]:hover, textarea:hover {
background-color: #f5f5f5;
}
/* 改變表單提交按鈕鼠標懸停時的樣式 */
input[type=submit]:hover {
background-color: #e5e5e5;
cursor: pointer;
}

以上CSS代碼可以使表單在獲得焦點和鼠標懸停時有不同的樣式，更加美觀。

總之，使用CSS來改變表單的樣式是一種非常有用的技巧，使表單更加美觀易讀，提高用戶體驗。