Display of the disabled attribute of the HTML select element in mainstream browsers

Test page Source code

We have the following test file test.html:

 1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  > 
 2   <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
 3   <  Head > 
 4   <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   /> 
 5   <  Title  > Test </  Title  > 
 6   </  Head  > 
 7   <  Body  > 
 8   <  Div  > 
 9   <  Select  Size = "5"  Disabled  = "Disabled"  > 
 10   <  Option  Value  = "C1"  > Black </  Option  > 
 11   <  Option Value  = "C2"  > Darkcyan </  Option  > 
 12   <  Option  Value  = "C3"  Selected  = "Selected"  > Darkred </  Option > 
 13   <  Option  Value  = "C4"  > Darkmagenta </  Option  > 
 14   </  Select  > 
 15   < Select  Size  = "5"  > 
 16   <  Option  Value  = "C1"  > Black </  Option  > 
 17   <  Option Value  = "C2"  > Darkcyan </  Option  > 
 18   <  Option  Value  = "C3"  Selected  = "Selected"  > Darkred </  Option > 
 19   <  Option  Value  = "C4"  > Darkmagenta </  Option  > 
 20   </  Select  > 
 21   < Input  Type  = "Text"   /> 
 22   </  Div  > 
 23   </  Body  > 
 24   </  Html  > 

Then let's take a look at the performance of this HTML file in mainstream browsers.

Opera

It can be seen that the display effect is very good, the background of the disabled control is gray, and the selected project is correctly marked.

Mozilla Firefox

The display effect is also good. the foreground of the disabled control is gray and the selected item is correctly marked.

Google Chrome

The display effect is very poor. the foreground of the disabled control is gray, but the content of the selected item is tragic.

Apple Safari

The display effect is also good, the foreground of disabled control is gray, and the selected project is correctly marked.

Microsoft IE versions

The display effects of Microsoft IE 5.5, ie 6, and IE 7 are basically the same, both of which are quite good. the foreground of the disabled control is gray and the selected project is correctly identified. These three versions of browsers are outdated and cannot be regarded as mainstream browsers, but IE 6 should still have a considerable market in China.

IE 8 and ie9 are tragic. the foreground of the disabled control is gray, which is good. However, the selected project is not identified, which is a very serious bug. These two versions of browsers are mainstream browsers. Windows XP can only be installed on IE 8, and Windows Vista can only be installed on IE 9.

The Display Effect of IE 10 is also very good. The background of the disabled control is gray and the selected project is correctly marked. However, for IE 10, Windows 8 is required.

Summary

Microsoft IE 5.5, Internet Explorer 6, Internet Explorer 7, Internet Explorer 10, Mozilla Firefox, Apple Safari, and opera all provide excellent support for the disabled attribute of HTML select elements. Internet Explorer 8, Internet Explorer 9, and chrome all have bugs, which cannot be well supported. I wonder if there is any way in the HTML sourceCodeRemedy this bug.

Remedy

Change test. hmtl as follows:

 1   <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  > 
 2   <  Html  Xmlns = "Http://www.w3.org/1999/xhtml"  > 
 3   <  Head  > 
 4   <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"   /> 
 5  <  Link  Href  = "Main.css"  Type  = "Text/CSS"  REL  = "Stylesheet"   /> 
 6   <  Title  > Test </  Title  > 
7   </  Head  > 
 8   <  Body  > 
 9   <  Div  > 
 10   <  Select  Size  = "5" Disabled  = "Disabled"  > 
 11   <  Option  Value  = "C1"  > Black </  Option  > 
 12   <  Option  Value = "C2"  > Darkcyan </  Option  > 
 13   <  Option  Value  = "C3"  Selected  = "Selected"  Class  = "Selected"  > Darkred </ Option  > 
 14   <  Option  Value  = "C4"  > Darkmagenta </  Option  > 
 15   </  Select  > 
 16  <  Select  Size  = "5"  > 
 17   <  Option  Value  = "C1"  > Black </  Option  > 
 18   < Option  Value  = "C2"  > Darkcyan </  Option  > 
 19   <  Option  Value  = "C3"  Selected  = "Selected"  > Darkred </ Option  > 
 20   <  Option  Value  = "C4"  > Darkmagenta </  Option  > 
 21   </  Select  > 
 22  <  Input  Type  = "Text"   /> 
 23   </  Div  > 
 24   </  Body  > 
 25   </  Html  > 

Main.css:

 
1 Option. Selected{
2 Color:White;
3 Background-color:Cyan;
4}
 

In this way, IE 8, ie 9, and chrome 18.0 are displayed as follows: