Question

I want to apply some css for all readonly elements on focus and I don’t know how to do that in IE8. For firefox,chrome,opera it works but IE8 wont to see this:

(background:#F8F8F8 !important;  outline:none !important;)

Is very strange and I don’t understand why the opacity is applied in even in IE8 and background, outline are not applied.

*[readonly]{
  opacity: 0.5;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  background:#F8F8F8 !important;
  outline:none !important;
  }

If someone can help, thank’s.

Answer 1

If you want it to be applied on focus, perhaps you should include the :focus pseudo-class. If that works the next step is to get rid of all those !importants unless you really, really need them:

[readonly]:focus {
  opacity: 0.5;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55);
  box-shadow: none;
  -webkit-box-shadow: none;
  background: #F8F8F8;
  outline: none;
}