表单控件的 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 不支持此属性。

另请参阅

学习路径

高级主题