How to style readonly attribute with CSS

Question

I m currently using readonly  readonly  to disable fields  I m now trying to style the attribute using CSS  I ve tried using  input readonly      styling info here       but it is not working for some reason  I ve also tried  input readonly  readonly       styling info here       that doesn t work either   How can I style the readonly attribute with CSS

User · Answer

capitalize the first letter of Only   x000D   x000D  input readOnly    x000D        background  red  important  x000D        x000D   lt input type  text  name  country  value  China  readonly  readonly    gt  x000D   x000D   x000D

User · Answer

input readonly        background-color blue      https   curtistimson co uk post css style-readonly-attribute-css

User · Answer

input readonly   input read-only          styling info here        Shoud cover all the cases for a readonly input field

User · Answer

If you select the input by the id and then add the input readonly  readonly   tag in the css  something like     inputID input readonly  readonly          background-color   000000       That will not work  You have to select a parent class or id an then the input  Something like     parentClass   parentID input readonly  readonly          background-color   000000       My 2 cents while waiting for new tickets at work  D

User · Answer

There are a few ways to do this   The first is the most widely used  It works on all major browsers   input readonly     background-color   dddddd      While the one above will select all inputs with readonly attached  this one below will select only what you desire  Make sure to replace demo with whatever input type you want   input type  demo   read-only    background-color   dddddd      This is an alternate to the first  but it s not used a whole lot   input read-only    background-color   dddddd      The  read-only selector is supported in Chrome  Opera  and Safari  Firefox uses  -moz-read-only  IE doesn t support the  read-only selector   You can also use input readonly  readonly    but this is pretty much the same as input readonly   from my experience

User · Answer

To be safe you may want to use both     input readonly   input readonly  readonly           styling info here       The readonly attribute is a  boolean attribute   which can be either blank or  readonly   the only valid values   http   www whatwg org specs web-apps current-work  boolean-attribute  If you are using something like jQuery s  prop  readonly   true  function  you ll end up needing  readonly   whereas if you are using  attr  readonly    readonly   then you ll need  readonly  readonly       Correction  You only need to use input readonly   Including input readonly  readonly   is redundant  See https   stackoverflow com a 19645203 1766230

User · Answer

Use the following to work in all browsers    var readOnlyAttr       textBoxClass   attr  readonly        if  typeof readOnlyAttr      undefined   amp  amp  readOnlyAttr     false                textBoxClass   addClass  locked

User · Answer

Note that textarea readonly  readonly   works if you set readonly  readonly  in HTML but it does NOT work if you set the readOnly-attribute to true or  readonly  via JavaScript   For the CSS selector to work if you set readOnly with JavaScript you have to use the selector textarea readonly    Same behavior in Firefox 14 and Chrome 20   To be on the safe side  i use both selectors   textarea readonly  readonly    textarea readonly

User · Answer

Loads of answers here  but haven t seen the one I use   input type  text   read-only   color  blue      Note the dash in the pseudo selector  If the input is readonly  false  it ll catch that too since this selector catches the presence of readonly regardless of the value  Technically false is invalid according to specs  but the internet is not a perfect world  If you need to cover that case  you can do this   input type  text   read-only not  read-only  false      color  blue      textarea works the same way   textarea read-only not  read-only  false      color  blue      Keep in mind that html now supports not only type  text   but a slew of other textual types such a number  tel  email  date  time  url  etc  Each would need to be added to the selector

[html] How to style readonly attribute with CSS?

Examples related to html

Examples related to css

Examples related to css-selectors