Change the font color of a disabled SELECT element in IE-10 and above browsers with the ::ms-value CSS pseudo-element
Styling the SELECT element is not a big deal. Styling the disabled SELECT elements is pain point when developing web applications or a app. Now web rendering engines added hooks with pseudo-elements to give developers some control on user interface.
Before implementing the hooks of pseudo-element keep in mind that this pseudo-element is rendering engine specific that is IE specific.
The ::ms-value pseudo-element was drafted for CSS Selectors Level 3 and applies one or more styles to the content of a text or password input control, or a select control.
Example :
The following example sets the text color of select element to black:
select[disabled='disabled']::-ms-value
{
background-color:#FFF;
color: #000; //Any Color
}
As we know that the ::-ms-value pseudo-element supports only IE, Said that the below css needs to be added for other browsers support.
The following example sets the text color of select element to black:
select[disabled='disabled']
{
background-color:#FFF;
color: #000; //Any Color
}
Browser Support
The ::(Microsoft) ms-value pseudo-element is supported in Internet Explorer 10 and above.
Demo :
http://jsfiddle.net/nanduh/5c76xqcq/2/
Your feedback's and comments always welcomed and New learning for me
Cheers!!!
Comments
Post a Comment