Search code examples
cssgwttextfieldreadonlymgwt

is there any way to make css pseudo-class input:focus not to effect when filed is readonly,GWT/MGWT

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,

Solution

  • 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).