2

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?

Glen
  • 802
  • 1
  • 11
  • 27
  • have you checked this link ?http://stackoverflow.com/questions/13739355/why-readonly-not-worked-in-ie-8-and-ie-9 – Ismail Farooq Apr 18 '16 at 05:39
  • No I have not seen this page until now but yes other pages on this site suggest either way you declare it, it should work. I have also tried all variations and makes no difference - not working for me! And I don't want to use disabled. – Glen Apr 18 '16 at 05:50
  • have you tried by adding html5shiv and respond js ? – Ismail Farooq Apr 18 '16 at 05:51
  • 1
    see here bootstrap example for for html5 element IE compatibility http://getbootstrap.com/getting-started/#template – Ismail Farooq Apr 18 '16 at 05:52
  • 1
    I created a dummy asp page with just a single box and added the one meta tag and this works great thank you, I have somewhere to start however, when I apply the same meta tag (or 3) to my particular page still not working. Your html5shiv and respond.js ideas does NOT seem applicable for my scenario as I am using IE11. All users within the intranet space have been upgraded to IE11 so I do not have to be backward compatible. – Glen Apr 18 '16 at 06:15
  • so your problem has solved ? – Ismail Farooq Apr 18 '16 at 06:18
  • No my dummy test page is working however, my order page is still not working which seems very strange. So there must be something else overwriting my CSS style – Glen Apr 18 '16 at 06:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/109398/discussion-between-glen-and-ismail-farooq). – Glen Apr 18 '16 at 06:35
  • can you show me link ? – Ismail Farooq Apr 18 '16 at 06:45
  • It is an Intranet site so no I cannot send u the link unfortunately – Glen Apr 18 '16 at 07:04

4 Answers4

7

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/

TylerH
  • 20,799
  • 66
  • 75
  • 101
satya
  • 1,145
  • 8
  • 12
  • Thank you for your response however, you given me nothing more than what I have described above. Great yours works but my doesn't. I want a suggestion where to look to figure out why it is not working for me, any ideas? – Glen Apr 18 '16 at 05:26
  • Did you tried with some bright color such as red as the color you are using for backfround color is very light and it is hard to make difference if the backgrouund color applied or not. – satya Apr 18 '16 at 05:29
  • Of course I tried red and a few other colours and yes it does work in fiddle and W3Schools but not my intranet website. The answer is deeper – Glen Apr 18 '16 at 05:40
2

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

Ahmed Alaa
  • 124
  • 7
  • Thanks I read this article however as I said to [Ismail Farooq] I managed to get it to work using the input[readonly] {} style for a dummy page, so the "... may not ..." is closer to a may be at this point. – Glen Apr 18 '16 at 07:07
1

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

Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47
  • I am pretty sure I tried that one anyhow I tried again and still no result. I will just have to add bit by bit of my code from my order page to my dummy page until it breaks – Glen Apr 18 '16 at 23:28
  • http://www.w3schools.com/cssref/sel_read-only.asp now i think ie is not fully support ie may be – Ismail Farooq Apr 19 '16 at 03:02
  • ok now i have javascript solution may be this will help you i am going to update my answer – Ismail Farooq Apr 19 '16 at 04:50
0

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

krishna
  • 508
  • 2
  • 8