CSS 表單

通過使用 CSS，可以極大地改善 HTML 表單的外觀：

親自試一試

設置輸入字段的樣式

使用 width 屬性來確定輸入字段的寬度：

實例

input {
  width: 100%;
}

親自試一試

上例適用于所有 <input> 元素。如果只想設置特定輸入類型的樣式，則可以使用屬性選擇器：

  • input[type=text] - 將僅選擇文本字段
  • input[type=password] - 將僅選擇密碼字段
  • input[type=number] - 將僅選擇數字字段
  • 等等...

填充輸入框

使用 padding 屬性在文本字段內添加空間。

提示：若有很多輸入，那么您可能還需要添加外邊距，以便在它們之外添加更多空間：

實例

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

親自試一試

請注意，我們已將 box-sizing 屬性設置為 border-box。這樣可以確保元素的總寬度和高度中包括內邊距（填充）和最終的邊框。

請在在我們的 CSS Box Sizing 這一章中學習有關 box-sizing 屬性的更多知識。

帶邊框的輸入框

請使用 border 屬性更改邊框的粗細和顏色，并使用 border-radius 屬性添加圓角：

實例

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

親自試一試

如果僅需要下邊框，請使用 border-bottom 屬性：

實例

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

親自試一試

彩色的輸入框

請使用 background-color 屬性為輸入添加背景色，并使用 color 屬性更改文本顏色：

實例

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

親自試一試

獲得焦點的輸入框

默認情況下，某些瀏覽器在獲得焦點（單擊）時會在輸入框周圍添加藍色輪廓。您可以通過向輸入添加 outline: none; 來消除此行為。

使用 :focus 選擇器可以在輸入字段獲得焦點時為其設置樣式：

實例 1

input[type=text]:focus {
  background-color: lightblue;
}

請在文本框中點擊：

親自試一試

實例 2

input[type=text]:focus {
  border: 3px solid #555;
}

請在文本框中點擊：

親自試一試

帶有圖標/圖像的輸入框

如果希望在輸入框中包含圖標，請使用 background-image 屬性，并將其與 background-position 屬性一起設置。還要注意，我們添加了一個較大的左內邊距（padding-left）來留出圖標的空間：

實例

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

親自試一試

帶動畫效果的搜索輸入框

在本例中，我們使用 CSS transition 屬性為搜索輸入框獲得焦點時的寬度變化設置動畫。稍后，您將在我們的 CSS 過渡 一章中學到更多有關 transition 屬性的知識。

實例

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

親自試一試

設置文本域的樣式

提示：使用 resize 屬性可防止對 textareas 調整大小（禁用右下角的“抓取器”）：

實例

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

親自試一試

設置選擇菜單的樣式

實例

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

親自試一試

設置輸入按鈕的樣式

實例

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* 提示：請使用  width: 100%，以實現全寬按鈕 */

親自試一試

有關如何使用 CSS 設置按鈕樣式的更多知識，請學習我們的 CSS 按鈕 教程。

響應式菜單

請調整 TIY 編輯器窗口的大小來查看效果。當屏幕的寬度小于 600 像素時，使兩列上下堆疊而不是左右堆疊。

高級：接下來的例子使用 媒體查詢 來創建響應式表單。在下一章中，您將學到更多相關知識。

查看響應式菜單