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

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

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

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

button {
background-color: #4CAF50; /*默認背景色*/
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; /*默認圓角*/
}
button.custom-button {
background-color: #f00; /*自定義背景色*/
border-radius: 8px; /*自定義圓角*/
}

通過CSS美化表單組件可以提升用戶體驗和網站的視覺效果。如果你想了解更多有關CSS的細節，請參考官方文檔或相關教程。