Property compatibility table for form widgets

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

Values

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 simply doesn't work or is so inconsistent that it's not reliable.
N.A.
The property has no meaning for this type of widget.

Rendering

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;
  -moz-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

Property N T Note
CSS box model
width Yes Yes
height Partial[1][2] Yes
  1. 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.
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
border Partial[1][2] Yes
  1. 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.
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
margin Yes Yes
padding Partial[1][2] Yes
  1. 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.
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
Text and font
color[1] Yes Yes
  1. If the 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>s.
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]
  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
  1. 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
  1. 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.
  2. On Opera the border-radius property is applied only if an explicit border is set.
box-shadow No Partial[1]
  1. IE9 does not support this property.

Buttons

Property N T Note
CSS box model
width Yes Yes
height Partial[1] Yes
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
border Partial Yes
margin Yes Yes
padding Partial[1] Yes
  1. 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]
  1. On Opera the border-radius property is applied only if an explicit border is set.
box-shadow No Partial[1]
  1. IE9 does not support this property.

Number

On browsers that implement the number widget, there is no standard way to change the style of spinners used to change the value of the field. It is worth noting that the spinners on Safari are outside the field.

Property N T Note
CSS box model
width Yes Yes
height Partial[1] Partial[1]
  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]
  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

Property N T Note
CSS box model
width No[1] No[1]
  1. Some browsers add extra margins and others stretch the widget.
height No[1] No[1]
  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)

Firefox does not provide any way to change the down arrow on the <select> element.

Property N T Note
CSS box model
width Partial[1] Partial[1]
  1. This property is okay on the <select> element, but it cannot be the case on the <option> or <optgroup> elements.
height No Yes
border Partial Yes
margin Yes Yes
padding No[1] Partial[2]
  1. The property is applied, but in an inconsistent way between browsers on Mac OSX.
  2. The property is well applied on the <select> element, but is inconsistently handled on <option> and <optgroup> elements.
Text and font
color Partial[1] Partial[1]
  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> elements.
font Partial[1] Partial[1]
  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> elements.
letter-spacing Partial[1] Partial[1]
  1. IE9 does not support this property on <select>, <option>, and <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> elements.
text-align No[1] No[1]
  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]
  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> element.
text-indent Partial[1][2] Partial[1][2]
  1. Most of the browsers only support this property on the <select> element.
  2. IE9 does not support this property.
text-overflow No No
text-shadow Partial[1][2] Partial[1][2]
  1. Most of the browsers only support this property on the <select> element.
  2. IE9 does not support this property.
text-transform Partial[1] Partial[1]
  1. Most of the browsers only support this property on the <select> element.
Border and background
background Partial[1] Partial[1]
  1. Most of the browsers only support this property on the <select> element.
border-radius Partial[1] Partial[1]
box-shadow No Partial[1]

Select boxes (multiline)

Property N T Note
CSS box model
width Yes Yes
height Yes Yes
border Yes Yes
margin Yes Yes
padding Partial[1] Partial[1]
  1. Opera does not support padding-top and padding-bottom on the <select> element.
Text and font
color Yes Yes
font Yes Yes See the note about line-height.
letter-spacing Partial[1] Partial[1]
  1. IE9 does not support this property on <select>, <option>, and <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> elements.
text-align No[1] No[1]
  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]
  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]
  1. Most of the browsers only support this property on the <select> element.
Border and background
background Yes Yes
border-radius Yes[1] Yes[1]
  1. On Opera the border-radius property is applied only if an explicit border is set.
box-shadow No Partial[1]
  1. IE9 does not support this property.

Datalist

Property N T Note
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

Property N T Note
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]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
letter-spacing Partial[1] Partial[1]
  1. Many browsers apply this property to the select button.
text-align No No
text-decoration No No
text-indent Partial[1] Partial[1]
  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]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
border-radius No No
box-shadow No Partial[1]
  1. IE9 does not support this property.

Date pickers

Many properies are supported but there is to much inconstency between browsers to be reliable.

Property N T Note
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

There is currently not enough implementation to get reliable behaviors.

Property N T Note
CSS box model
width Yes Yes
height No[1] Yes
  1. Opera handles this like a select widget with the same restriction.
border Yes Yes
margin Yes Yes
padding No[1] Yes
  1. 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]
  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

There is currently not enough implementation to get reliable behaviors.

Property N T Note
CSS box model
width Yes Yes
height Yes Yes
border Partial Yes
margin Yes Yes
padding Yes Partial[1]
  1. Chrome hides the <progress> and <meter> element when the padding property is applied on a tweaked element.
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]
  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

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.

Property N T Note
CSS box model
width Yes Yes
height Partial[1] Partial[1]
  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
  1. The padding is applied, but has no visual effect.
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]
  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

Property N T Note
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]
  1. IE9 does not support this property.
box-shadow Partial[1] Partial[1]
  1. IE9 does not support this property.

 

In this module

Related Topics
  1. Complete beginners start here!
  2. Getting started with the Web
    1. Getting started with the Web overview
    2. Installing basic software
    3. What will your website look like?
    4. Dealing with files
    5. HTML basics
    6. CSS basics
    7. JavaScript basics
    8. Publishing your website
    9. How the Web works
  3. HTML — Structuring the Web
  4. Introduction to 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. Multimedia and embedding
    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 tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. HTML forms
    1. HTML forms overview
    2. Your first HTML form
    3. How to structure an HTML form
    4. The native form widgets
    5. Sending form data
    6. Form validation
    7. How to build custom form widgets
    8. Sending forms through JavaScript
    9. HTML forms in legacy browsers
    10. Styling HTML forms
    11. Advanced styling for HTML forms
    12. Property compatibility table for form widgets
  8. CSS — Styling the Web
  9. CSS first steps
    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
  10. CSS building blocks
    1. CSS building blocks overview
    2. Cascade and inheritance
    3. CSS selectors
    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
  11. Styling text
    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
  12. CSS layout
    1. CSS layout overview
    2. Introduction
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    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
  13. JavaScript — Dynamic client-side scripting
  14. JavaScript first steps
    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. Arrays
    10. Assessment: Silly story generator
  15. JavaScript building blocks
    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. Introduction to events
    8. Assessment: Image gallery
  16. Introducing JavaScript objects
    1. Introducing JavaScript objects overview
    2. Object basics
    3. Object-oriented JavaScript for beginners
    4. Object prototypes
    5. Inheritance in JavaScript
    6. Working with JSON data
    7. Object building practice
    8. Assessment: Adding features to our bouncing balls demo
  17. Asynchronous 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
  18. Client-side web APIs
    1. Client-side web APIs
    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
  19. Accessibility — Make the web usable by everyone
  20. 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
  21. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  22. Tools and testing
  23. 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
  24. Server-side website programming
  25. First steps
    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
  26. Django web framework (Python)
    1. Django web framework (Python) overview
    2. Introduction
    3. Setting up a development environment
    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
  27. 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
  28. Further resources
  29. Common questions
    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. How the Web works
    5. Tools and setup
    6. Design and accessibility
  30. How to contribute