You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.
All Trident pseudo-elements listed here were added in IE10 and will not work in earlier versions of Internet Explorer. In WebKit, to style some pseudo-elements you must set the basis element’s -webkit-appearance pseudo-class to none.
WebKit provides a pseudo-element for the track and for the range handle itself. As of Firefox 22, Gecko provides pseudo-elements for styling range inputs. Trident provides a bunch of pseudo-elements to customize its range selector.
Applies one or more styles to the clear button of a text input control. The clear button is shown only when the text input control has focus and is not empty.
WebKit provides a spinner control by default for number picker inputs. While you cannot do a whole lot with these elements, it can be useful to hide the spinner.
Trident provides a pseudo-element for checkbox button control.
input[type=checkbox]::-ms-check
<input type="radio">
Trident provides a pseudo-element for the radio button control.
input[type=radio]::-ms-check
<input type="text">
As of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs. Further more in IE10 when a text input has focus and is not empty, a small (x) control appears in the right hand side of the input. When clicked, the control will clear the contents of the text input.
Trident provides a control on password inputs that can be pressed to display the password in plain text. And as of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs.
WebKit and Gecko provide a placeholder pseudo-element. Note: Gecko switched from the pseudo-class :-moz-placeholder to the pseudo-element ::-moz-placeholder in Firefox 19.
WebKit provides pseudo-elements to style progress elements. And Gecko provides a pseudo-element to style the progress bar itself. Like Gecko, Trident provides a single pseudo-element to style the progress bar.
Note: Adding display: none to ::-webkit-resizer doesn't actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing in textarea use this.
Styling native elements
Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element
::pseudo-elementor the/deep/path selector.Note
All Trident pseudo-elements listed here were added in IE10 and will not work in earlier versions of Internet Explorer. In WebKit, to style some pseudo-elements you must set the basis element’s
-webkit-appearancepseudo-class tonone.<input type="search">
<input type="file">
WebKit provides a hook for its file input button with the pseudo-element.
<input type="range">
WebKit provides a pseudo-element for the track and for the range handle itself. As of Firefox 22, Gecko provides pseudo-elements for styling range inputs. Trident provides a bunch of pseudo-elements to customize its range selector.
<input type="time">
Applies one or more styles to the clear button of a text input control. The clear button is shown only when the text input control has focus and is not empty.
<input type="date">
The following pseudo-elements are made available by WebKit for customizing a date input’s textbox.
<input type="color">
Webkit provides two pseudo elements for its color picker.
<input type="number">
WebKit provides a spinner control by default for number picker inputs. While you cannot do a whole lot with these elements, it can be useful to hide the spinner.
<input type="checkbox">
Trident provides a pseudo-element for checkbox button control.
<input type="radio">
Trident provides a pseudo-element for the radio button control.
<input type="text">
As of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs. Further more in IE10 when a text input has focus and is not empty, a small (x) control appears in the right hand side of the input. When clicked, the control will clear the contents of the text input.
<input type="password">
Trident provides a control on password inputs that can be pressed to display the password in plain text. And as of IE10 Trident provides the pseudo-element ::-ms-value to style the value portion of text inputs.
<input type="reset">
<input type="submit">
<input type="button">
placeholder Attribute
WebKit and Gecko provide a placeholder pseudo-element. Note: Gecko switched from the pseudo-class
:-moz-placeholderto the pseudo-element::-moz-placeholderin Firefox 19.<keygen>
WebKit provides a pseudo-element that can be used to customize the dropdown that a keygen element uses.
::-webkit-keygen-select<input>
Gecko and Webkit applies following pseudo-elements to there inputs.
<button>
<select>
As of IE10 Trident gives you a hook to style the arrow within select dropdowns.
<details>
<summary>
<meter>
WebKit provides pseudo-elements to customize the display of meter elements.
On Mac OS X, WebKit provides multiple built-in appearances for
<meter>.<progress>
WebKit provides pseudo-elements to style progress elements. And Gecko provides a pseudo-element to style the progress bar itself. Like Gecko, Trident provides a single pseudo-element to style the progress bar.
<textarea>
This pseudo-element also allows some basic styling for the textarea resizer.
Note: Adding
display: noneto::-webkit-resizerdoesn't actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing in textarea use this.<img>
<p>
<video>
<audio>
Scrollbar
Custom Scrollbars in WebKit.
Form validation message-bubbe
Note: Chrome 28 removed support for these pseudo-elements
Source
The text was updated successfully, but these errors were encountered: