CODEWITHSUNDEEP
htmlcssreadonly-attribute
Glen
Glen

Reputation: 830

css input textbox readonly to set background color not working

I have an old Classic ASP form that I need to add functionality to and I am using IE11. I decided to insert a doctype as follows (which I am not sure why or if it is necessary):

<!DOCTYPE html>

And added to my CSS file:

input[readonly] {
    background-color: #f6f6f6;
}

as other pages on this site suggest to change the background-color of a readonly textbox however it is not changing the color!

My HTML is declared as:

<input type="TEXT" readonly name="ORDERNO" value="<%=OrderNo%>" style="width:177px">

Any ideas why it is not working. There is no other styling applied that I can see that could potentially overwrite it. Is there anything else I need to post to clarify my issue?

Upvotes: 2

Views: 34213

Answers (4)

satya
satya

Reputation: 1185

I have created a JSFiddle and it is working, please see the below link:

Try to change the background color to something bright color.

<input type="TEXT" readonly name="ORDERNO" value="<%=OrderNo%>" style="width:177px"

input[readonly] {
    background-color: red;
}

https://jsfiddle.net/nu2a4jbv/1/

Upvotes: 7

krishna
krishna

Reputation: 518

May be existing css overwrite the current css. use 'background-color':'#f6f6f6' !important; may be its work.

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6827

So there are many websites saying Readonly is not fully supported By IE see the following link w3schools, MDN, css-tricks. So you need to move JavaScript / JQuery solution.

For example 

$(':input[readonly]').css({'background-color':'#f6f6f6'});

May this will help you. Fiddle

Upvotes: 1

Ahmed Alaa
Ahmed Alaa

Reputation: 124

I think you will find what you are looking for here

https://css-tricks.com/almanac/selectors/r/read-write-read/

Note: IE may not support changing background color for read only inputs

Upvotes: 2

Related Questions