IE9 Fragment of display in focus

Question

Check out the screenshot. You will notice that the flag with focus is actually different from other flags. What would make it look like in IE9?

I have the following CSS code snippet, and I only noticed that if you remove ALL from the following CSS, this problem will no longer be executed. But if I remove at least one or two of these rules, it will happen anyway. I am puzzled.

textarea:active, textarea:focus, textarea:active:hover, textarea:focus:hover, select:active, select:focus, select:active:hover, select:focus:hover, input:active, input:focus, input:active:hover, input:focus:hover{ background-color:#f9f9f5; border-color:#658cae; -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; z-index:1;/* for Opera */ } input[type="file"]:focus, input[type="file"]:active, input[type="radio"]:focus, input[type="radio"]:active, input[type="checkbox"]:focus, input[type="checkbox"]:active { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } input[type="file"]:focus, input[type="file"]:active, input[type="file"][disabled], input[type="radio"]:focus, input[type="radio"]:active, input[type="radio"][disabled], input[type="checkbox"]:focus, input[type="checkbox"]:active, input[type="checkbox"][disabled]{ background-color:transparent; } 

Here's a live demo: http://jsfiddle.net/QRzRw/1/

Answer 1

This is the evil part:

 input:focus, input:active:hover, input:focus:hover{ background-color:#f9f9f5; border-color:#658cae; } 

It seems that after you have made this parameter, it cannot be undone by assigning transparent or inherit .

It looks like you should add these styles for all input[type=...] tags, except for the type flags.

Answer 2

Internet Explorer uses Windows form elements for HTML forms by default. They are standardized as if they were in any Windows application ... until you try to apply styles to them manually.

This can be demonstrated using conventional text input. If you try to set the background-color property, the overall style of the input element will change with it, as Internet Explorer switches from a standard Windows form control to a user form control. For your convenience, I created this demo here .

Other versions of Internet Explorer behave the same. A possible workaround would be to target CSS only to non-IE browsers using a method such as Paul Irish conditional CSS classes .

Answer 3

A friend helped me with this, and he realized that setting a border or background on the checkbox would make it look like this for some odd reason.

NGLN is correct, and I will agree to his answer. To do this, I had to change my CSS to the following:

 textarea, select, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"]{ font-family:'ColaborateRegular'; background-color:#efefeb; border:1px solid; border-color:#89969f #89969f #cbcbc8 #89969f; outline: 0; padding:3px; width: 100%; margin-bottom:10px; -webkit-box-shadow:inset 0 1px 2px #b8b7b3; -moz-box-shadow:inset 0 1px 2px #b8b7b3; box-shadow:inset 0 1px 2px #b8b7b3; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-appearance: none; -webkit-transition:background-color 0.4s, border-color 0.4s; -moz-transition:background-color 0.4s, border-color 0.4s; -ms-transition:background-color 0.4s, border-color 0.4s; -o-transition:background-color 0.4s, border-color 0.4s; transition:background-color 0.4s, border-color 0.4s; } input[type="radio"], input[type="checkbox"]{ margin:0 2px 0 0; } textarea:hover, select:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover{ -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5; -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5; box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5; } textarea:active, textarea:focus, textarea:active:hover, textarea:focus:hover, select:active, select:focus, select:active:hover, select:focus:hover, input[type="email"]:active, input[type="email"]:focus, input[type="email"]:active:hover, input[type="email"]:focus:hover, input[type="number"]:active, input[type="number"]:focus, input[type="number"]:active:hover, input[type="number"]:focus:hover, input[type="password"]:active, input[type="password"]:focus, input[type="password"]:active:hover, input[type="password"]:focus:hover, input[type="search"]:active, input[type="search"]:focus, input[type="search"]:active:hover, input[type="search"]:focus:hover, input[type="tel"]:active, input[type="tel"]:focus, input[type="tel"]:active:hover, input[type="tel"]:focus:hover, input[type="text"]:active, input[type="text"]:focus, input[type="text"]:active:hover, input[type="text"]:focus:hover{ background-color:#f9f9f5; border-color:#658cae; -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5; z-index:1;/* for Opera */ } 

Answer 4

I know that this has already been answered, but I believe that I have a better solution. I seem to get the same thing in IE 8 + 9

 <!--[if gte IE 8]> <style type="text/css"> input[type="checkbox"] { outline:0;border:0; } </style> <![endif]-->