CSS 表單

一個表單案例,我們使用 CSS 來渲染 HTML 的表單元素:

CSS 例項

input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }

嘗試一下 ?

輸入框(input) 樣式

使用 width 屬性來設定輸入框的寬度:

CSS 例項

input { width: 100%; }

嘗試一下 ?

以上例項中設定了所有 <input> 元素的寬度為 100%,如果你只想設定指定型別的輸入框可以使用以下屬性選擇器:

  • input[type=text] - 選取文字輸入框
  • input[type=password] - 選擇密碼的輸入框
  • input[type=number] - 選擇數字的輸入框
  • ...

輸入框填充

使用 padding 屬性可以在輸入框中新增內邊距。

CSS 例項

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

嘗試一下 ?

注意我們設定了 box-sizing 屬性為 border-box。這樣可以確保瀏覽器呈現出帶有指定寬度和高度的輸入框是把邊框和內邊距一起計算進去的。
更多內容可以閱讀 CSS3 框大小 。


輸入框(input) 邊框

使用 border 屬性可以修改 input 邊框的大小或顏色,使用 border-radius 屬性可以給 input 新增圓角:

CSS 例項

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

嘗試一下 ?

如果你只想新增底部邊框可以使用 border-bottom 屬性:

CSS 例項

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

嘗試一下 ?

輸入框(input) 顏色

可以使用 background-color 屬性來設定輸入框的背景顏色,color 屬性用於修改文字顏色:

CSS 例項

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

嘗試一下 ?

輸入框(input) 聚焦

預設情況下,一些瀏覽器在輸入框獲取焦點時(點選輸入框)會有一個藍色輪廓。我們可以設定 input 樣式為 outline: none; 來忽略該效果。

使用 :focus 選擇器可以設定輸入框在獲取焦點時的樣式:

CSS 例項

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

嘗試一下 ?

CSS 例項

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

嘗試一下 ?

輸入框(input) 圖示

如果你想在輸入框中新增圖示,可以使用 background-image 屬性和用於定位的background-position 屬性。注意設定圖示的左邊距,讓圖示有一定的空間:

CSS 例項

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 動畫 章節檢視更多內容。

CSS 例項

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

嘗試一下 ?

文字框(textarea)樣式

注意: 使用 resize 屬性來禁用文字框可以重置大小的功能(一般拖動右下角可以重置大小)。

CSS 例項

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)樣式

CSS 例項

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

嘗試一下 ?

按鈕樣式

CSS 例項

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 按鈕 教程。


響應式表單

響應式表單可以根據瀏覽器視窗的大小重新佈局各個元素,我們可以通過重置瀏覽器視窗大小來檢視效果:

高階: 以下例項使用了CSS3 多媒體查詢 來建立一個響應式表單。

CSS 例項

* { box-sizing: border-box; } input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; } label { padding: 12px 12px 12px 0; display: inline-block; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; float: right; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } .col-25 { float: left; width: 25%; margin-top: 6px; } .col-75 { float: left; width: 75%; margin-top: 6px; } /* 清除浮動 */ .row:after { content: ""; display: table; clear: both; } /* 響應式佈局 layout - 在螢幕寬度小於 600px 時, 設定為上下堆疊元素 */ @media screen and (max-width: 600px) { .col-25, .col-75, input[type=submit] { width: 100%; margin-top: 0; } }

嘗試一下 ?