Is it possible to make input fields read-only through CSS

Question

I know that input elements are made read-only by applying the readonly boolean attribute  and being an attribute it is not affected by CSS   On the other hand  my scenario seems to be a very good fit for CSS  so I was hoping there is some kind of a CSS trick to let me do it  I have a printable version hyperlink on my form  Clicking it displays a     printable version of the document  It is mostly CSS stuff  my print css looks like this   html print       width  8 57in      print body       font  9pt 1 5 Arial  sans-serif      margin  0 1in      overflow  auto      print  header   print  footer       display  none      print  content       background-color  white      overflow  auto      print  fieldset  gt  div legend first-child       background  white      print   -webkit-input-placeholder          WebKit browsers        color  transparent      print  -moz-placeholder          Mozilla Firefox 4 to 18        color  transparent      print   -moz-placeholder          Mozilla Firefox 19         color  transparent      print  -ms-input-placeholder          Internet Explorer 10         color  transparent      print  check-mark       display  inline      print input type checkbox        display  none      print  boolean-false       display  none      There are also a few javascript pieces  such as    Adding the print class to the html element Displaying tables without scroll bars A few other minor things  like hiding any popup overlays    My current problem is input fields  They should be read-only  however  I have no idea how to do it with minimum changes to the code  CSS could be a perfect solution   Any ideas

User · Answer

Why not hide the input element and replace it with a label element with the same content?

I puzzled over how the React TODOMVC app accomplished this same thing and this is the strategy they came up with.

To see it in action, check out the app below, and watch the CSS properties of the TODO items when you double click them and then click away.

http://todomvc.com/examples/react-backbone/#/

When you render the page you can have either an editable input, or a non-editable label with display:none; depending on your media query.

User · Answer

This is not possible with css  but I have used one css trick in one of my website  please check if this works for you   The trick is  wrap the input box with a div and make it relative  place a transparent image inside the div and make it absolute over the input text box  so that no one can edit it   css   txtBox      width 250px      height 25px      position relative     txtBox input      width 250px      height 25px     txtBox img      position absolute      top 0      left 0     html   lt div class  txtBox  gt   lt input name    type  text  value  Text Box    gt   lt img src  http   dev w3 org 2007 mobileok-ref test data ROOT GraphicsForSpacingTest 1 largeTransparent gif  width  250  height  25  alt      gt   lt  div gt    jsFiddle File

User · Answer

You don t set the behavior of controls via CSS  only their styling You can use jquery or simple javascript to change the property of the fields

User · Answer

It is not  with current browsers  possible to make an input field read-only through CSS alone    Though  as you have already mentioned  you can apply the attribute readonly  readonly    If your main criteria is to not alter the markup in the source  there are ways to get this in  unobtrusively  with javascript   With jQuery  this is easy       input   attr  readonly   true     Or even with plain Javascript   document getElementById  someId   setAttribute  readonly    readonly

User · Answer

Hope this will help       input readonly  readonly         background-color blue      reference   http   jsfiddle net uzyH5 1

User · Answer

The read-only attribute in HTML is used to create a text input non-editable  But in case of CSS  the pointer-events property is used to stop the pointer events   Syntax   pointer-events  none    Example  This example shows two input text  in which one is non-editable    lt  DOCTYPE html gt    lt html gt        lt head gt            lt title gt               Disable Text Input field           lt  title gt             lt style gt            inputClass                pointer-events  none                       lt  style gt        lt  head gt         lt body style    text-align center   gt          Non-editable  lt input class  inputClass  name  input  value  NonEditable  gt             lt br gt  lt br gt            Editable  lt input name  input  value  Editable  gt        lt  body gt    lt  html gt

User · Answer

Not really what you need  but it can help and answser the question here depending of what you want to achieve   You can prevent all pointer events to be sent to the input by using the CSS property   pointer-events none  It will kind of add a layer on top of the element that will prevent you to click in it     You can also add a cursor text to the parent element to give back the text cursor style to the input      Usefull  for example  when you can t modify the JS HTML of a module   and you can just customize it by css   JSFIDDLE

User · Answer

CSS based input text readonly change color of selection   CSS      default page CSS       selection   background   d1d0c3  color   393729       -moz-selection   background   d1d0c3  color   393729        for readonly input    input readonly  readonly   focus   border-color   ced4da  box-shadow  none    input readonly  readonly    selection   background  none  color   000    input readonly  readonly    -moz-selection   background  none  color   000      HTML    lt input type  text  value  12345  id  readCaptch  readonly  readonly  class  form-control    gt    live Example  https   codepen io alpesh88ww pen mdyZBmV  also you can see why i was done    php captcha   https   codepen io alpesh88ww pen PoYeZVQ

User · Answer

With CSS only  This is sort of possible on text inputs by using user-select none    print     -webkit-user-select  none    -moz-user-select  none    -ms-user-select  none    user-select  none                JSFiddle example   It s well worth noting that this will not work in browsers which do not support CSS3 or support the user-select property  The readonly property should be ideally given to the input markup you wish to be made readonly  but this does work as a hacky CSS alternative   With JavaScript   document getElementById  myReadonlyInput   setAttribute  readonly    true      Edit  The CSS method no longer works in Chrome  29   The -webkit-user-select property now appears to be ignored on input elements

User · Answer

No behaviors can be set by CSS  The only way to disable something in CSS is to make it invisible by either setting display none or simply putting div with transparent img all over it and changing their z-orders to disable user focusing on it with mouse  Even though  user will still be able to focus with tab from another field

[javascript] Is it possible to make input fields read-only through CSS?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to printing