CSS（層疊樣式表）能夠輕松地為網(wǎng)頁添加美麗的外觀和交互效果。其中一個(gè)被廣泛使用的領(lǐng)域就是表單組件。本文將重點(diǎn)討論CSS輸入框和按鈕。

CSS輸入框可以讓普通的文本輸入框變得更具吸引力和美觀。例如，可以在輸入框周圍添加邊框、更改背景色或使用字體圖標(biāo)。以下代碼中，我們將演示如何通過CSS將輸入框的邊框從默認(rèn)樣式更改為自定義樣式。

input {
border: 2px solid #aaa; /*默認(rèn)邊框*/
}
input.custom-border {
border: 2px solid #f00; /*自定義邊框*/
}

按鈕是表單中的重要組件之一，可以用于提交表單、重置數(shù)據(jù)或執(zhí)行其他操作。與文本輸入框一樣，按鈕也可以通過CSS實(shí)現(xiàn)美化。例如，可以更改按鈕的顏色和形狀、應(yīng)用動(dòng)畫效果或添加圖標(biāo)。以下代碼將演示如何通過CSS創(chuàng)建自定義按鈕。

button {
background-color: #4CAF50; /*默認(rèn)背景色*/
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px; /*默認(rèn)圓角*/
}
button.custom-button {
background-color: #f00; /*自定義背景色*/
border-radius: 8px; /*自定義圓角*/
}

通過CSS美化表單組件可以提升用戶體驗(yàn)和網(wǎng)站的視覺效果。如果你想了解更多有關(guān)CSS的細(xì)節(jié)，請參考官方文檔或相關(guān)教程。