FireFox, CSS, and read-only

I mostly use Chrome, but I recently installed firefox and took a look at the sheet I am developing, there were a few discrepancies, that were mostly easy to fix.  Except one.  I have the following css that works perfectly in chrome. input[type="text"]:disabled, input[type="number"]:disabled, input[type="text"]:read-only, input[type="number"]:read-only {     display: inline-block;     background-color: blue;     color: white; } None of my read-only fields are colored to indicate they are locked! they all look exactly like the input fields! I read some very old articles that say that I need -moz-read-only for firefox, but I have tried that and a dozens of other things, but nothing whatsoever styles those fields. The fields are locked and read-only, they just don't look any different from the unlocked fields.  Any ideas?    Thanks. 

Wow, didn't realize this was even an option. Apart from the obvious option of giving the disabled/read-only fields a class named "disabled" and relying on it, I don't have any ideas.

Problem solved. I started over and tried various things one at a time. I don't know why, but the combination that both firefox and chrome seems to accept and interpret correctly is input[type="text"]:disabled, input[type="number"]:disabled, input[readonly], .sheet-fakeCalc input:not(.sheet-hidden) { ... } Firefox not only wants to see "input[readonly]", but if anything with :read-only anywhere in a selector is anywhere in any selector of that block, then it throws out the whole block. Which is to say firefox not just does not recognize it, but having it breaks all other selectors. 

Interesting.  I never thought about trying to give a different color to readonly fields, so I didn't run into this (I mostly use Firefox) on my sheet.  Definitely something to keep in mind though, because an indicator besides the cursor changing on hover is probably nice to have.

Yes, I tend to do a lot of Modifications / Total combo's, where the total is ether an auto-calculated field or a field set via sheet-worker.  You can edit the modifier (white field), but not the final value (dark). 

Kraynic said: Interesting.  I never thought about trying to give a different color to readonly fields, so I didn't run into this (I mostly use Firefox) on my sheet.  Definitely something to keep in mind though, because an indicator besides the cursor changing on hover is probably nice to have. In Chrome, readonly inputs are automatically shaded a different colour, with no action on the part of the sheet designer. I hadnt realised that didnt happen on firefox, so this is an informative thread.

GiGs said: In Chrome, readonly inputs are automatically shaded a different colour, with no action on the part of the sheet designer. I hadnt realised that didnt happen on firefox, so this is an informative thread. Plus, even in Chrome, this allows you to pick your colors/shading to match your specific color scheme.