在HTML中，輸入框是一個必不可少的元素，它們被用于收集用戶的各種輸入數據。CSS提供了一種簡單實用的方法來自定義文本輸入框，從而增強用戶體驗和提高視覺吸引力。在本文中，我們將討論如何使用CSS樣式設置文本輸入框。 首先，我們需要創建一個文本輸入框的基礎結構，它包括一個label元素和一個input元素。label元素是用來顯示文本輸入框的名稱，可以與input元素進行關聯，以便用戶能夠點擊label元素時獲取焦點和輸入數據。以下是一個基本的文本輸入框:Username:現在，我們可以使用CSS來自定義文本輸入框的外觀。下面是一個簡單的樣式示例，它將文本輸入框的背景顏色設置為灰色，邊框樣式設置為圓角，并為文本輸入框設置了一些內邊距，以使其更加容易使用。 pre { background-color: #eee; border-radius: 5px; padding: 10px; } label, input { font-size: 16px; font-family: Arial, sans-serif; display: block; margin-bottom: 10px; } input { border: none; border-radius: 5px; padding: 6px; } 上述代碼中，我們使用pre標簽來包裹CSS代碼，使其看起來更清晰。我們使用了多個CSS規則來設置文本框的樣式： 1. 我們設置了一個背景顏色為#eee的灰色區域來作為文本輸入框的背景。 2. 我們使用border-radius屬性來設置文本輸入框的圓角。在本例中，我們將radius設置為5像素以使其更圓潤。 3. 我們使用padding屬性來設置文本輸入框的內邊距。在本例中，我們使用了10像素的頂部和底部內邊距，以及20像素的左、右內邊距，這將創建一個更容易使用的文本輸入框。 4. 我們還為label和input標簽設置了兩個樣式，其中label標簽用于顯示標題，并與input標簽關聯，從而方便用戶獲取焦點并輸入數據。 5. 最后，我們設置了border:none屬性，以防止文本輸入框顯示任何不必要的邊框。 總結起來，使用CSS實現文本輸入框的自定義樣式是一項很簡單的任務，同時也是一項非常強大的技能。你可以使用CSS樣式創建自己的文本輸入框樣式，并針對不同的用戶需求進行微調和優化。這將進一步提高用戶體驗，增強您的網站的可用性。