1

I'm developing a mobile app using GWT,MGWT and HTML,CSS, My view having some text fields some of the fields among them are readonly. I used css pseudo-class in my css file as follows:

input[type=text]:focus {
    background-color: #FFFACD;
}

it is working fine when field is editable meaning text filed background is changing with #FFFACD when cursor pointed there, if we click/tap non-editable field the above is also effecting which I dont want to see. I even tried like below::

input[type=text]:disabled{
    background-color:  transparent;
}

But I'm getting nothing from above. How can I prevent css effect on readOnly filed. I'm making filed as readonly by doing like this. tf.setReadOnly(true);. Waiting for your valuable suggestion.

thanks in advance,

Arun Kumar Mudraboyina
  • 769
  • 9
  • 32

1 Answers1

3

You could change your selector to this:

input:not([readonly])[type=text]:focus {
    background-color: #FFFACD;
}

jsfiddle

:not is well supported (except for IE < 9).

Baz
  • 36,440
  • 11
  • 68
  • 94