Trident Vendor-Prefixed Pseudo Elements | CSS: Presentation Layer
Standards Based Development
Form Controls
| Form Control | Pseudo-Element(s) |
|---|---|
input type="checkbox" / | -ms-check | input type="radio" / | -ms-check |
input type="password" / | -ms-reveal |
input type="range" / | -ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip |
input type="email" /, input type="number" /, input type="password" /, input type="search" /, input type="tel" /, input type="url" / | -ms-value, -ms-browse |
progress | -ms-fill |
select | -ms-value, -ms-expand |
::-ms-browse Pseudo-Element
::-ms-browse applies styles to the browse button fo an input type="file" / form control.
Note: requires Windows 8.
::-ms-check Pseudo-Element
::-ms-check applies styles to the check of a checkbox or radio button in input type="checkbox" / and input type="radio" / (respectively) form controls.
::-ms-clear Pseudo-Element
::-ms-clear applies styles to the clear button of a input type="text" / form control. The clear button is shown only when the input type="text" / has focus and is not empty.
Note: requires Windows 8.
input[type=text]::-ms-clear{border:6px solid #666}
/** chaining **/
input[type=text].yourmom::-ms-clear{background-color:#ff0}
::-ms-expand Pseudo-Element
::-ms-expand styles to the drop-down button of a select form control.
Note: requires Windows 8.
select::-ms-expand{display:none}
Pseudo-elements (Internet Explorer)
::-ms-fill Pseudo-Element
::-ms-fill applies styles to the progress form control. Styles are applied to the bar portion of the determinate progress bar, except for the animation-name property, which controls the animation of the indeterminate progress control.
Note: requires Windows 8.
Controlling Animation of an Indeterminate progress Control
The animation-name property controls how the indeterminate progress form control is animated. It can be set using the following values:
| Keyword Value | Description |
|---|---|
none | Turns off the animation so that no dots are displayed. |
-ms-bar | Shows animated dots that flow in a bar pattern. |
-ms-ring | Shows animated dots that flow in a ring pattern. |
The example below makes a progress form control appear as an intermediate progress ring:
/* Show the ring animation. This setting only works when
you specify the width and height of the progress control */
#my-progress-ring::-ms-fill { animation-name: -ms-ring; }
::-ms-fill-lower Pseudo-Element
::-ms-fill-lower applies styles to portion of the track of an input type="range" / form control, also known as a slider control. The styles are applied to the control's track from its smallest value up to the value currently selected by the thumb. In a left-to-right layout, this is the portion of the track to the left of the thumb.
::-ms-fill-lower pseudo-element
::-ms-fill-upper Pseudo-Element
::-ms-fill-upper applies styles to portion of the track of an input type="range" / form control, also known as a slider control. The styles are applied to the control's track from the value currently selected by the thumb up to the slider's largest value. In a left-to-layout, this is the portion of the track to the right of the thumb.
::-ms-fill-upper pseudo-element
::-ms-reveal Pseudo-Element
::-ms-reveal applies styles to the password reveal button of an input type="password" / form control.
Note: requires Windows 8.
::-ms-thumb Pseudo-Element
::-ms-thumb applies styles to portion of the input type="range" / form control (slider control) that the user drags.
Note: requires Windows 8.
::-ms-ticks-after Pseudo-Element
::-ms-ticks-after applies styles to the tick marks after the slider track of an input type="range" / form control (slider). In a left-to-right layout, these are the ticks below the track. In a top-to-bottom layout, these are the ticks to the right of the track.
::-ms-ticks-after are not visible by default; needs display:block set in the document's style sheet.
::-ms-ticks-after can be used with the ::-ms-ticks-before and ::-ms-track selectors, however it will create three sets of tick marks, which is not recommended. For the most ideal ux, use one set of tick marks; to remove tick marks altogether, set color:transparent.
Note: requires Windows 8.
::-ms-ticks-after pseudo-element
::-ms-ticks-before Pseudo-Element
::-ms-ticks-before applies styles to the tick marks before the slider track of an input type="range" / form control (slider control). In a left-to-right layout, these are the ticks above the track; in a top-to-bottom layout, these are the ticks to the left of the track.
::-ms-ticks-before are not visible by default; needs display:block set in the document's style sheet.
::-ms-ticks-before can be used with the ::-ms-ticks-after and ::-ms-track selectors, however it will create three sets of tick marks, which is not recommended. For the most ideal ux, use one set of tick marks; to remove tick marks altogether, set color:transparent.
Note: requires Windows 8.
::-ms-ticks-after pseudo-element
::-ms-tooltip Pseudo-Element
::-ms-tooltip applies styles to the tooltip of a slider (input type="" / form control).
Note: only display and visibility properties are applicable for ::-ms-tooltip.
Note: requires Windows 8.
::-ms-track Pseudo-Element
::-ms-track applies styles to the track of an input type="" / form control (slider control).
Applying color within the ::-ms-track selector affects the tick marks inside the track area.
::-ms-track can be used with the ::-ms-ticks-after and ::-ms-ticks-before selectors, however it will create three sets of tick marks, which is not recommended. For the most ideal ux, use one set of tick marks; to remove tick marks altogether, set color:transparent.
Note: requires Windows 8.
::-ms-value Pseudo-Element
::-ms-value applies styles to the content of a input type="text" /, input type="password" /, and select form control.