内容表

• How to read the tables
• Compatibility tables
• 另请参阅

CSS property compatibility table for form controls

The following compatibility tables try to summarize the state of CSS support for HTML forms. Due to the complexity of CSS and HTML forms, these tables can't be considered a perfect reference. However, they will give you good insight into what can and can't be done, which will help you learn how to do things.

How to read the tables

值

For each property, there are four possible values:

Yes

There's reasonably consistent support for the property across browsers. You may still face strange side effects in certain edge cases.

Partial

While the property works, you may frequently face strange side effects or inconsistencies. You should probably avoid these properties unless you master those side effects first.

No

The property doesn't work or is so inconsistent that it's not reliable.

n.a.

The property has no meaning for this type of widget.

渲染

For each property there are two possible renderings:

N (Normal)

Indicates that the property is applied as it is

T (Tweaked)

Indicates that the property is applied with the extra rule below:

* {
  /* Turn off the native look and feel */
  -webkit-appearance: none;
  appearance: none;
/* for Internet Explorer */
  background: none;
}

					

Compatibility tables

Global behaviors

Some behaviors are common to many browsers at a global level:

border , background , border-radius , height

Using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. Be careful when you use them.

line-height

This property is supported inconsistently across browsers and you should avoid it.

text-decoration

This property is not supported by Opera on form widgets.

text-overflow

Opera, Safari, and IE9 do not support this property on form widgets.

text-shadow

Opera does not support text-shadow on form widgets and IE9 does not support it at all.

Text fields

见 text , search ，和 password input types.

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Partial [1][2]	Yes	WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
border	Partial [1][2]	Yes	WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
margin	Yes	Yes
padding	Partial [1][2]	Yes	WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
Text and font
color [1]	Yes	Yes	若 border-color property is not set, some WebKit based browsers will apply the color property to the border as well as the font on <textarea> 。
font	Yes	Yes	See the note about line-height
letter-spacing	Yes	Yes
text-align	Yes	Yes
text-decoration	Partial	Partial	See the note about Opera
text-indent	Partial [1]	Partial [1]	IE9 supports this property only on <textarea> s, whereas Opera only supports it on single line text fields.
text-overflow	Partial	Partial
text-shadow	Partial	Partial
text-transform	Yes	Yes
Border and background
background	Partial [1]	Yes	WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
border-radius	Partial [1][2]	Yes	WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied. On Opera the border-radius 特性为 applied only if an explicit border is set.
box-shadow	No	Partial [1]	IE9 does not support this property.

按钮

见 button ,  submit ，和 reset input types and the <button> 元素。

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Partial [1]	Yes	This property is not applied on WebKit based browsers on Mac OSX or iOS.
border	Partial	Yes
margin	Yes	Yes
padding	Partial [1]	Yes	This property is not applied on WebKit based browsers on Mac OSX or iOS.
Text and font
color	Yes	Yes
font	Yes	Yes	See the note about line-height .
letter-spacing	Yes	Yes
text-align	No	No
text-decoration	Partial	Yes
text-indent	Yes	Yes
text-overflow	No	No
text-shadow	Partial	Partial
text-transform	Yes	Yes
Border and background
background	Yes	Yes
border-radius	Yes [1]	Yes [1]	On Opera the border-radius 特性为 applied only if an explicit border is set.
box-shadow	No	Partial [1]	IE9 does not support this property.

Number

See the  number input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Partial [1]	Partial [1]	On Opera, the spinners are zoomed in, which can hide the content of the field.
border	Yes	Yes
margin	Yes	Yes
padding	Partial [1]	Partial [1]	On Opera, the spinners are zoomed in, which can hide the content of the field.
Text and font
color	Yes	Yes
font	Yes	Yes	See the note about line-height .
letter-spacing	Yes	Yes
text-align	Yes	Yes
text-decoration	Partial	Partial
text-indent	Yes	Yes
text-overflow	No	No
text-shadow	Partial	Partial
text-transform	N.A.	N.A.
Border and background
background	No	No	Supported but there is too much inconsistency between browsers to be reliable.
border-radius	No	No
box-shadow	No	No

Check boxes and radio buttons

见 checkbox and radio input types.

特性	N	T	注意
CSS box model
width	No [1]	No [1]	Some browsers add extra margins and others stretch the widget.
height	No [1]	No [1]	Some browsers add extra margins and others stretch the widget.
border	No	No
margin	Yes	Yes
padding	No	No
Text and font
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.
Border and background
background	No	No
border-radius	No	No
box-shadow	No	No

Select boxes (single line)

见 <select> ,  <optgroup> and  <option> 元素。

特性	N	T	注意
CSS box model
width	Partial [1]	Partial [1]	This property is okay on the <select> element, but it cannot be the case on the <option> or <optgroup> 元素。
height	No	Yes
border	Partial	Yes
margin	Yes	Yes
padding	No [1]	Partial [2]	The property is applied, but in an inconsistent way between browsers on Mac OSX. The property is well applied on the <select> element, but is inconsistently handled on <option> and <optgroup> 元素。
Text and font
color	Partial [1]	Partial [1]	On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <option> and <optgroup> 元素。
font	Partial [1]	Partial [1]	On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <option> and <optgroup> 元素。
letter-spacing	Partial [1]	Partial [1]	IE9 does not support this property on <select> , <option> ，和 <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> 元素。
text-align	No [1]	No [1]	IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.
text-decoration	Partial [1]	Partial [1]	Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <select> 元素。
text-indent	Partial [1][2]	Partial [1][2]	Most of the browsers only support this property on the <select> 元素。 IE9 does not support this property.
text-overflow	No	No
text-shadow	Partial [1][2]	Partial [1][2]	Most of the browsers only support this property on the <select> 元素。 IE9 does not support this property.
text-transform	Partial [1]	Partial [1]	Most of the browsers only support this property on the <select> 元素。
Border and background
background	Partial [1]	Partial [1]	Most of the browsers only support this property on the <select> 元素。
border-radius	Partial [1]	Partial [1]
box-shadow	No	Partial [1]

Note Firefox does not provide any way to change the down arrow on the <select> 元素。

Select boxes (multiline)

见 <select> , <optgroup> and  <option> elements and the size 属性 .

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Yes	Yes
border	Yes	Yes
margin	Yes	Yes
padding	Partial [1]	Partial [1]	Opera does not support padding-top and padding-bottom 在 <select> 元素。
Text and font
color	Yes	Yes
font	Yes	Yes	See the note about line-height .
letter-spacing	Partial [1]	Partial [1]	IE9 does not support this property on <select> , <option> ，和 <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> 元素。
text-align	No [1]	No [1]	IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.
text-decoration	No [1]	No [1]	Only supported by Firefox and IE9+.
text-indent	No	No
text-overflow	No	No
text-shadow	No	No
text-transform	Partial [1]	Partial [1]	Most of the browsers only support this property on the <select> 元素。
Border and background
background	Yes	Yes
border-radius	Yes [1]	Yes [1]	On Opera the border-radius 特性为 applied only if an explicit border is set.
box-shadow	No	Partial [1]	IE9 does not support this property.

Datalist

见 <datalist> and <input> elements and the list 属性 .

特性	N	T	注意
CSS box model
width	No	No
height	No	No
border	No	No
margin	No	No
padding	No	No
Text and font
color	No	No
font	No	No
letter-spacing	No	No
text-align	No	No
text-decoration	No	No
text-indent	No	No
text-overflow	No	No
text-shadow	No	No
text-transform	No	No
Border and background
background	No	No
border-radius	No	No
box-shadow	No	No

File picker

见 file input type.

特性	N	T	注意
CSS box model
width	No	No
height	No	No
border	No	No
margin	Yes	Yes
padding	No	No
Text and font
color	Yes	Yes
font	No [1]	No [1]	Supported, but there is too much inconsistency between browsers to be reliable.
letter-spacing	Partial [1]	Partial [1]	Many browsers apply this property to the select button.
text-align	No	No
text-decoration	No	No
text-indent	Partial [1]	Partial [1]	It acts more or less like an extra left margin outside the widget.
text-overflow	No	No
text-shadow	No	No
text-transform	No	No
Border and background
background	No [1]	No [1]	Supported, but there is too much inconsistency between browsers to be reliable.
border-radius	No	No
box-shadow	No	Partial [1]	IE9 does not support this property.

Date pickers

见 date and time input types. Many properties are supported, but there is too much inconsistency between browsers to be reliable.

特性	N	T	注意
CSS box model
width	No	No
height	No	No
border	No	No
margin	Yes	Yes
padding	No	No
Text and font
color	No	No
font	No	No
letter-spacing	No	No
text-align	No	No
text-decoration	No	No
text-indent	No	No
text-overflow	No	No
text-shadow	No	No
text-transform	No	No
Border and background
background	No	No
border-radius	No	No
box-shadow	No	No

Color pickers

见 color input type:

特性	N	T	注意
CSS box model
width	Yes	Yes
height	No [1]	Yes	Opera handles this like a select widget with the same restriction.
border	Yes	Yes
margin	Yes	Yes
padding	No [1]	Yes	Opera handles this like a select widget with the same restriction.
Text and font
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.
Border and background
background	No [1]	No [1]	Supported, but there is too much inconsistency between browsers to be reliable.
border-radius	No [1]	No [1]
box-shadow	No [1]	No [1]

Meters and progress

见 <meter> and <progress> 元素：

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Yes	Yes
border	Partial	Yes
margin	Yes	Yes
padding	Yes	Partial [1]	Chrome hides the <progress> and <meter> element when the padding property is applied on a tweaked 元素。
Text and font
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.
Border and background
background	No [1]	No [1]	Supported, but there is too much inconsistency between browsers to be reliable.
border-radius	No [1]	No [1]
box-shadow	No [1]	No [1]

范围

见 range input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Partial [1]	Partial [1]	Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.
border	No	Yes
margin	Yes	Yes
padding	Partial [1]	Yes	padding is applied, but has no visual 效果。
Text and font
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.
Border and background
background	No [1]	No [1]	Supported, but there is too much inconsistency between browsers to be reliable.
border-radius	No [1]	No [1]
box-shadow	No [1]	No [1]

Image buttons

见 image input type:

特性	N	T	注意
CSS box model
width	Yes	Yes
height	Yes	Yes
border	Yes	Yes
margin	Yes	Yes
padding	Yes	Yes
Text and font
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.
Border and background
background	Yes	Yes
border-radius	Partial [1]	Partial [1]	IE9 does not support this property.
box-shadow	Partial [1]	Partial [1]	IE9 does not support this property.

另请参阅

Learning path

• Your first HTML form
• How to structure an HTML form
• The native form widgets
• HTML5 input types
• Additional form controls
• UI pseudo-classes
• Styling HTML forms
• Form data validation
• Sending form data

高级话题

• Sending forms through JavaScript
• How to build custom form widgets
• HTML forms in legacy browsers
• Advanced styling for HTML forms
• Property compatibility table for form widgets

发现此页面有问题吗？

• 编辑在 GitHub
• 源在 GitHub
• Report a problem with this content on GitHub
• 想要自己修复问题吗？见 我们的贡献指南 .

最后修改： Oct 8, 2021 , 由 MDN 贡献者

相关话题

1. Complete beginners start here!
2. Web 快速入门

   1. Getting started with the Web overview
   2. 安装基本软件
   3. What will your website look like?
   4. 处理文件
   5. HTML 基础
   6. CSS 基础
   7. JavaScript 基础
   8. 发布您的网站
   9. How the Web works
3. HTML — Structuring the Web
4. HTML 介绍

   1. Introduction to HTML overview
   2. Getting started with HTML
   3. What's in the head? Metadata in HTML
   4. HTML text fundamentals
   5. Creating hyperlinks
   6. Advanced text formatting
   7. Document and website structure
   8. Debugging HTML
   9. Assessment: Marking up a letter
   10. Assessment: Structuring a page of content
5. 多媒体和嵌入

   1. Multimedia and embedding overview
   2. Images in HTML
   3. Video and audio content
   4. From object to iframe — other embedding technologies
   5. Adding vector graphics to the Web
   6. Responsive images
   7. Assessment: Mozilla splash page
6. HTML 表格

   1. HTML tables overview
   2. HTML table basics
   3. HTML Table advanced features and accessibility
   4. Assessment: Structuring planet data
7. CSS — Styling the Web
8. CSS 第一步

   1. CSS first steps overview
   2. What is CSS?
   3. Getting started with CSS
   4. How CSS is structured
   5. How CSS works
   6. Using your new knowledge
9. CSS 构建块

   1. CSS building blocks overview
   2. Cascade and inheritance
   3. CSS 选择器
   4. The box model
   5. Backgrounds and borders
   6. Handling different text directions
   7. Overflowing content
   8. Values and units
   9. Sizing items in CSS
   10. Images, media, and form elements
   11. Styling tables
   12. Debugging CSS
   13. Organizing your CSS
10. 样式化文本

    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
11. CSS 布局

    1. CSS layout overview
    2. Introduction to CSS layout
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. 位置
    8. Multiple-column Layout
    9. Responsive design
    10. Beginner's guide to media queries
    11. Legacy Layout Methods
    12. Supporting Older Browsers
    13. Fundamental Layout Comprehension
12. JavaScript — Dynamic client-side scripting
13. JavaScript 第一步

    1. JavaScript first steps overview
    2. What is JavaScript?
    3. A first splash into JavaScript
    4. What went wrong? Troubleshooting JavaScript
    5. Storing the information you need — Variables
    6. Basic math in JavaScript — Numbers and operators
    7. Handling text — Strings in JavaScript
    8. Useful string methods
    9. 数组
    10. Assessment: Silly story generator
14. JavaScript 构建块

    1. JavaScript building blocks overview
    2. Making decisions in your code — Conditionals
    3. Looping code
    4. Functions — Reusable blocks of code
    5. Build your own function
    6. Function return values
    7. 事件介绍
    8. Assessment: Image gallery
15. 引入 JavaScript 对象

    1. Introducing JavaScript objects overview
    2. Object basics
    3. 对象原型
    4. Object-oriented programming concepts
    5. Classes in JavaScript
    6. Working with JSON data
    7. Object building practice
    8. Assessment: Adding features to our bouncing balls demo
16. 异步 JavaScript

    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
17. 客户端侧 Web API

    1. 客户端侧 Web API
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third party APIs
    6. Drawing graphics
    7. Video and audio APIs
    8. Client-side storage
18. Web forms — Working with user data
19. Core forms learning pathway

    1. Web forms overview
    2. Your first form
    3. How to structure a web form
    4. Basic native form controls
    5. The HTML5 input types
    6. Other form controls
    7. Styling web forms
    8. Advanced form styling
    9. UI pseudo-classes
    10. Client-side form validation
    11. Sending form data
20. Advanced forms articles

    1. How to build custom form controls
    2. Sending forms through JavaScript
    3. CSS property compatibility table for form controls
21. Accessibility — Make the web usable by everyone
22. Accessibility guides

    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
23. Accessibility assessment

    1. Assessment: Accessibility troubleshooting
24. Tools and testing
25. Client-side web development tools

    1. Client-side web development tools index
    2. Client-side tooling overview
    3. Command line crash course
    4. Package management basics
    5. Introducing a complete toolchain
    6. Deploying our app
26. Introduction to client-side frameworks

    1. Client-side frameworks overview
    2. Framework main features
27. React

    1. Getting started with React
    2. Beginning our React todo list
    3. Componentizing our React app
    4. React interactivity: Events and state
    5. React interactivity: Editing, filtering, conditional rendering
    6. Accessibility in React
    7. React resources
28. Ember

    1. Getting started with Ember
    2. Ember app structure and componentization
    3. Ember interactivity: Events, classes and state
    4. Ember Interactivity: Footer functionality, conditional rendering
    5. Routing in Ember
    6. Ember resources and troubleshooting
29. Vue

    1. Getting started with Vue
    2. Creating our first Vue component
    3. Rendering a list of Vue components
    4. Adding a new todo form: Vue events, methods, and models
    5. Styling Vue components with CSS
    6. Using Vue computed properties
    7. Vue conditional rendering: editing existing todos
    8. Focus management with Vue refs
    9. Vue resources
30. Svelte

    1. Getting started with Svelte
    2. Starting our Svelte Todo list app
    3. Dynamic behavior in Svelte: working with variables and props
    4. Componentizing our Svelte app
    5. Advanced Svelte: Reactivity, lifecycle, accessibility
    6. Working with Svelte stores
    7. TypeScript support in Svelte
    8. Deployment and next steps
31. Angular

    1. Getting started with Angular
    2. Beginning our Angular todo list app
    3. Styling our Angular app
    4. Creating an item component
    5. Filtering our to-do items
    6. Building Angular applications and further resources
32. Git and GitHub

    1. Git and GitHub overview
    2. Hello World
    3. Git Handbook
    4. Forking Projects
    5. About pull requests
    6. Mastering Issues
33. Cross browser testing

    1. Cross browser testing overview
    2. Introduction to cross browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
34. Server-side website programming
35. 第一步

    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
36. Django Web 框架 (Python)

    1. Django web framework (Python) overview
    2. 介绍
    3. 设置开发环境
    4. Tutorial: The Local Library website
    5. Tutorial Part 2: Creating a skeleton website
    6. Tutorial Part 3: Using models
    7. Tutorial Part 4: Django admin site
    8. Tutorial Part 5: Creating our home page
    9. Tutorial Part 6: Generic list and detail views
    10. Tutorial Part 7: Sessions framework
    11. Tutorial Part 8: User authentication and permissions
    12. Tutorial Part 9: Working with forms
    13. Tutorial Part 10: Testing a Django web application
    14. Tutorial Part 11: Deploying Django to production
    15. Web application security
    16. Assessment: DIY mini blog
37. Express Web Framework (node.js/JavaScript)

    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
38. Further resources
39. Common questions

    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. Web mechanics
    5. Tools and setup
    6. Design and accessibility