表單控制元件的 CSS 屬性相容性表

以下相容性表格試圖總結 CSS 對 HTML 表單的支援狀態。由於 CSS 和 HTML 表單的複雜性，這些表格不能被視為完美的參考。但是，它們會讓你很好地瞭解哪些可以做，哪些不能做，這將有助於你學習如何做事情。

如何閱讀表格

值

對於每個屬性，有四種可能的值

✅ 是

該屬性在瀏覽器之間具有相當一致的支援。你可能仍然會在某些邊緣情況下遇到奇怪的副作用。

⚠️ 部分

雖然該屬性有效，但你可能會經常遇到奇怪的副作用或不一致。除非你首先掌握這些副作用，否則你應該避免使用這些屬性。

❌ 否

該屬性不起作用或不一致到無法可靠使用。

n.a.

該屬性對於這種型別的視窗小部件沒有意義。

渲染

對於每個屬性，有兩種可能的渲染

N（正常）

表示該屬性按原樣應用

T（調整）

表示該屬性與以下額外規則一起應用

css
* {
  /* Turn off the native look and feel */
  appearance: none;
}

相容性表格

使用 CSS 改變表單控制元件的外觀，例如使用 border、background、border-radius 和 height，可能會部分或完全關閉某些瀏覽器中視窗小部件的原生外觀和感覺。在使用它們時要小心。

文字欄位

參見 text、search 和 password 輸入型別。

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ⚠️ 部分[1] ✅ 是
  1. WebKit 瀏覽器（主要在 Mac OSX 和 iOS 上）使用搜索欄位的原生外觀和感覺。因此，需要使用 appearance:none 才能將此屬性應用於搜尋欄位。
border ⚠️ 部分[1] ✅ 是
  1. WebKit 瀏覽器（主要在 Mac OSX 和 iOS 上）使用搜索欄位的原生外觀和感覺。因此，需要使用 appearance:none 才能將此屬性應用於搜尋欄位。
margin ✅ 是 ✅ 是
padding ⚠️ 部分[1] ✅ 是
  1. WebKit 瀏覽器（主要在 Mac OSX 和 iOS 上）使用搜索欄位的原生外觀和感覺。因此，需要使用 appearance:none 才能將此屬性應用於搜尋欄位。
文字和字型
color[1] ✅ 是 ✅ 是
  1. 如果沒有設定 border-color 屬性，一些基於 WebKit 的瀏覽器會將 color 屬性應用於 <textarea> 的邊框和字型。
font ✅ 是 ✅ 是 參見有關 line-height 的說明
letter-spacing ✅ 是 ✅ 是
text-align ✅ 是 ✅ 是
text-decoration ⚠️ 部分 ⚠️ 部分 參見有關 Opera 的說明
text-indent ⚠️ 部分[1] ⚠️ 部分[1]
  1. IE9 僅在 <textarea> 上支援此屬性，而 Opera 僅在單行文字欄位上支援此屬性。
text-overflow ⚠️ 部分 ⚠️ 部分
text-shadow ⚠️ 部分 ⚠️ 部分
text-transform ✅ 是 ✅ 是
邊框和背景
background ⚠️ 部分[1] ✅ 是
  1. WebKit 瀏覽器（主要在 Mac OSX 和 iOS 上）使用搜索欄位的原生外觀和感覺。因此，需要使用 -webkit-appearance:none 才能將此屬性應用於搜尋欄位。
border-radius ⚠️ 部分[1] ✅ 是
  1. WebKit 瀏覽器（主要在 Mac OSX 和 iOS 上）使用搜索欄位的原生外觀和感覺。因此，需要使用 -webkit-appearance:none 才能將此屬性應用於搜尋欄位。
box-shadow ❌ 否 ⚠️ 部分[1]
  1. IE9 不支援此屬性。

按鈕

參見 button、submit 和 reset 輸入型別以及 <button> 元素。

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ⚠️ 部分[1] ✅ 是
  1. 此屬性不會應用於 Mac OSX 或 iOS 上基於 WebKit 的瀏覽器。
border ⚠️ 部分 ✅ 是
margin ✅ 是 ✅ 是
padding ⚠️ 部分[1] ✅ 是
  1. 此屬性不會應用於 Mac OSX 或 iOS 上基於 WebKit 的瀏覽器。
文字和字型
color ✅ 是 ✅ 是
font ✅ 是 ✅ 是 參見有關 line-height 的說明。
letter-spacing ✅ 是 ✅ 是
text-align ❌ 否 ❌ 否
text-decoration ⚠️ 部分 ✅ 是
text-indent ✅ 是 ✅ 是
text-overflow ❌ 否 ❌ 否
text-shadow ⚠️ 部分 ⚠️ 部分
text-transform ✅ 是 ✅ 是
邊框和背景
background ✅ 是 ✅ 是
border-radius ✅ 是[1] ✅ 是[1]
  1. 在 Opera 上，border-radius 屬性僅在設定了顯式邊框時才會應用。
box-shadow ❌ 否 ⚠️ 部分[1]
  1. IE9 不支援此屬性。

數字

參見 number 輸入型別。沒有標準方法可以更改用於更改欄位值的微調器的樣式，Safari 上的微調器位於欄位之外。

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ⚠️ 部分[1] ⚠️ 部分[1]
  1. 在 Opera 上，微調器被放大，這可能會隱藏欄位的內容。
border ✅ 是 ✅ 是
margin ✅ 是 ✅ 是
padding ⚠️ 部分[1] ⚠️ 部分[1]
  1. 在 Opera 上，微調器被放大，這可能會隱藏欄位的內容。
文字和字型
color ✅ 是 ✅ 是
font ✅ 是 ✅ 是 參見有關 line-height 的說明。
letter-spacing ✅ 是 ✅ 是
text-align ✅ 是 ✅ 是
text-decoration ⚠️ 部分 ⚠️ 部分
text-indent ✅ 是 ✅ 是
text-overflow ❌ 否 ❌ 否
text-shadow ⚠️ 部分 ⚠️ 部分
text-transform N.A. N.A.
邊框和背景
background ❌ 否 ❌ 否

支援，但瀏覽器之間存在太多不一致，無法可靠使用。
border-radius ❌ 否 ❌ 否
box-shadow ❌ 否 ❌ 否

複選框和單選按鈕

參見 checkbox 和 radio 輸入型別。

屬性 N T 注意
CSS 盒模型
width ❌ 否[1] ❌ 否[1]
  1. 一些瀏覽器會新增額外的邊距，而另一些瀏覽器會拉伸視窗小部件。
height ❌ 否[1] ❌ 否[1]
  1. 一些瀏覽器會新增額外的邊距，而另一些瀏覽器會拉伸視窗小部件。
border ❌ 否 ❌ 否
margin ✅ 是 ✅ 是
padding ❌ 否 ❌ 否
文字和字型
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
邊框和背景
background ❌ 否 ❌ 否
border-radius ❌ 否 ❌ 否
box-shadow ❌ 否 ❌ 否

選擇框（單行）

參見 <select>、<optgroup> 和 <option> 元素。

屬性 N T 注意
CSS 盒模型
width ⚠️ 部分[1] ⚠️ 部分[1]
  1. 此屬性在 <select> 元素上是可以的，但在 <option> 或 <optgroup> 元素上則不行。
height ❌ 否 ✅ 是
border ⚠️ 部分 ✅ 是
margin ✅ 是 ✅ 是
padding ❌ 否[1] ⚠️ 部分[2]
  1. 該屬性已應用，但在 Mac OSX 上的瀏覽器之間不一致。
  2. 該屬性在 <select> 元素上應用良好，但在 <option> 和 <optgroup> 元素上處理不一致。
文字和字型
color ⚠️ 部分[1] ⚠️ 部分[1]
  1. 在 Mac OSX 上，基於 WebKit 的瀏覽器不支援原生視窗小部件上的此屬性，並且它們與 Opera 一樣，也不支援 <option> 和 <optgroup> 元素上的此屬性。
font ⚠️ 部分[1] ⚠️ 部分[1]
  1. 在 Mac OSX 上，基於 WebKit 的瀏覽器不支援原生視窗小部件上的此屬性，並且它們與 Opera 一樣，也不支援 <option> 和 <optgroup> 元素上的此屬性。
letter-spacing ⚠️ 部分[1] ⚠️ 部分[1]
  1. IE9 不支援 <select>、<option> 和 <optgroup> 元素上的此屬性；Mac OSX 上基於 WebKit 的瀏覽器不支援 <option> 和 <optgroup> 元素上的此屬性。
text-decoration ⚠️ 部分[1] ⚠️ 部分[1]
  1. 只有 Firefox 提供對該屬性的完全支援。其他瀏覽器僅在 <select> 元素上支援它。
text-indent ⚠️ 部分[1] ⚠️ 部分[1]
  1. 大多數瀏覽器僅在 <select> 元素上支援此屬性。
text-overflow ❌ 否 ❌ 否
text-shadow ⚠️ 部分[1] ⚠️ 部分[1]
  1. 大多數瀏覽器僅在 <select> 元素上支援此屬性。
text-transform ⚠️ 部分[1] ⚠️ 部分[1]
  1. 大多數瀏覽器僅在 <select> 元素上支援此屬性。
邊框和背景
background ⚠️ 部分[1] ⚠️ 部分[1]
  1. 大多數瀏覽器僅在 <select> 元素上支援此屬性。
border-radius ⚠️ 部分[1] ⚠️ 部分[1]
box-shadow ❌ 否 ⚠️ 部分[1]

注意 Firefox 沒有提供更改 <select> 元素上的向下箭頭的方法。

選擇框（多行）

參見 <select>、<optgroup> 和 <option> 元素以及 size 屬性。

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ✅ 是 ✅ 是
border ✅ 是 ✅ 是
margin ✅ 是 ✅ 是
padding ⚠️ 部分[1] ⚠️ 部分[1]
  1. Opera 不支援 <select> 元素上的 padding-top 和 padding-bottom。
文字和字型
color ✅ 是 ✅ 是
font ✅ 是 ✅ 是 參見有關 line-height 的說明。
letter-spacing ⚠️ 部分[1] ⚠️ 部分[1]
  1. IE9 不支援 <select>、<option> 和 <optgroup> 元素上的此屬性；Mac OSX 上基於 WebKit 的瀏覽器不支援 <option> 和 <optgroup> 元素上的此屬性。
text-align ❌ 否[1] ❌ 否[1]
  1. Mac OSX 上基於 WebKit 的瀏覽器不支援此視窗小部件上的此屬性。
text-decoration ❌ 否[1] ❌ 否[1]
  1. 僅 Firefox 和 IE9+ 支援。
text-indent ❌ 否 ❌ 否
text-overflow ❌ 否 ❌ 否
text-shadow ❌ 否 ❌ 否
text-transform ⚠️ 部分[1] ⚠️ 部分[1]
  1. 大多數瀏覽器僅在 <select> 元素上支援此屬性。
邊框和背景
background ✅ 是 ✅ 是
border-radius ✅ 是[1] ✅ 是[1]
  1. 在 Opera 上，border-radius 屬性僅在設定了顯式邊框時才會應用。
box-shadow ❌ 否 ⚠️ 部分[1]
  1. IE9 不支援此屬性。

資料列表

參見 <datalist> 和 <input> 元素以及 list 屬性。

屬性 N T 注意
CSS 盒模型
width ❌ 否 ❌ 否
height ❌ 否 ❌ 否
border ❌ 否 ❌ 否
margin ❌ 否 ❌ 否
padding ❌ 否 ❌ 否
文字和字型
color ❌ 否 ❌ 否
font ❌ 否 ❌ 否
letter-spacing ❌ 否 ❌ 否
text-align ❌ 否 ❌ 否
text-decoration ❌ 否 ❌ 否
text-indent ❌ 否 ❌ 否
text-overflow ❌ 否 ❌ 否
text-shadow ❌ 否 ❌ 否
text-transform ❌ 否 ❌ 否
邊框和背景
background ❌ 否 ❌ 否
border-radius ❌ 否 ❌ 否
box-shadow ❌ 否 ❌ 否

檔案選擇器

參見 file 輸入型別。

屬性 N T 注意
CSS 盒模型
width ❌ 否 ❌ 否
height ❌ 否 ❌ 否
border ❌ 否 ❌ 否
margin ✅ 是 ✅ 是
padding ❌ 否 ❌ 否
文字和字型
color ✅ 是 ✅ 是
font ❌ 否[1] ❌ 否[1]
  1. 支援，但瀏覽器之間存在太多不一致，無法可靠使用。
letter-spacing ⚠️ 部分[1] ⚠️ 部分[1]
  1. 許多瀏覽器會將此屬性應用於選擇按鈕。
text-align ❌ 否 ❌ 否
text-decoration ❌ 否 ❌ 否
text-indent ⚠️ 部分[1] ⚠️ 部分[1]
  1. 它或多或少地像視窗小部件外部的額外左邊距一樣起作用。
text-overflow ❌ 否 ❌ 否
text-shadow ❌ 否 ❌ 否
text-transform ❌ 否 ❌ 否
邊框和背景
background ❌ 否[1] ❌ 否[1]
  1. 支援，但瀏覽器之間存在太多不一致，無法可靠使用。
border-radius ❌ 否 ❌ 否
box-shadow ❌ 否 ⚠️ 部分[1]
  1. IE9 不支援此屬性。

日期選擇器

參見 date 和 time 輸入型別。許多屬性受支援，但瀏覽器之間存在太多不一致，無法可靠使用。

屬性 N T 注意
CSS 盒模型
width ❌ 否 ❌ 否
height ❌ 否 ❌ 否
border ❌ 否 ❌ 否
margin ✅ 是 ✅ 是
padding ❌ 否 ❌ 否
文字和字型
color ❌ 否 ❌ 否
font ❌ 否 ❌ 否
letter-spacing ❌ 否 ❌ 否
text-align ❌ 否 ❌ 否
text-decoration ❌ 否 ❌ 否
text-indent ❌ 否 ❌ 否
text-overflow ❌ 否 ❌ 否
text-shadow ❌ 否 ❌ 否
text-transform ❌ 否 ❌ 否
邊框和背景
background ❌ 否 ❌ 否
border-radius ❌ 否 ❌ 否
box-shadow ❌ 否 ❌ 否

顏色選擇器

參見 color 輸入型別

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ❌ 否[1] ✅ 是
  1. Opera 將其視為具有相同限制的選擇視窗小部件。
border ✅ 是 ✅ 是
margin ✅ 是 ✅ 是
padding ❌ 否[1] ✅ 是
  1. Opera 將其視為具有相同限制的選擇視窗小部件。
文字和字型
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
邊框和背景
background ❌ 否[1] ❌ 否[1]
  1. 支援，但瀏覽器之間存在太多不一致，無法可靠使用。
border-radius ❌ 否[1] ❌ 否[1]
box-shadow ❌ 否[1] ❌ 否[1]

儀表和進度

參見 <meter> 和 <progress> 元素

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ✅ 是 ✅ 是
border ⚠️ 部分 ✅ 是
margin ✅ 是 ✅ 是
padding ✅ 是 ⚠️ 部分[1]
  1. 當 padding 屬性應用於調整後的元素時，Chrome 會隱藏 <progress> 和 <meter> 元素。
文字和字型
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
邊框和背景
background ❌ 否[1] ❌ 否[1]
  1. 支援，但瀏覽器之間存在太多不一致，無法可靠使用。
border-radius ❌ 否[1] ❌ 否[1]
box-shadow ❌ 否[1] ❌ 否[1]

範圍

參見 range 輸入型別。沒有標準方法可以更改範圍控制柄的樣式，Opera 也沒有方法可以調整範圍視窗小部件的預設渲染。

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ⚠️ 部分[1] ⚠️ 部分[1]
  1. Chrome 和 Opera 在視窗小部件周圍添加了一些額外的空間。
border ❌ 否 ✅ 是
margin ✅ 是 ✅ 是
padding ⚠️ 部分[1] ✅ 是
  1. padding 已應用，但沒有視覺效果。
文字和字型
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
邊框和背景
background ❌ 否[1] ❌ 否[1]
  1. 支援，但瀏覽器之間存在太多不一致，無法可靠使用。
border-radius ❌ 否[1] ❌ 否[1]
box-shadow ❌ 否[1] ❌ 否[1]

影像按鈕

參見 image 輸入型別

屬性 N T 注意
CSS 盒模型
width ✅ 是 ✅ 是
height ✅ 是 ✅ 是
border ✅ 是 ✅ 是
margin ✅ 是 ✅ 是
padding ✅ 是 ✅ 是
文字和字型
color N.A. N.A.
font N.A. N.A.
letter-spacing N.A. N.A.
text-align N.A. N.A.
text-decoration N.A. N.A.
text-indent N.A. N.A.
text-overflow N.A. N.A.
text-shadow N.A. N.A.
text-transform N.A. N.A.
邊框和背景
background ✅ 是 ✅ 是
border-radius ⚠️ 部分[1] ⚠️ 部分[1]
  1. IE9 不支援此屬性。
box-shadow ⚠️ 部分[1] ⚠️ 部分[1]
  1. IE9 不支援此屬性。

另請參閱

學習路徑

高階主題