title: Is it possible to make input fields read-only through CSS?
body: <p>I know that input elements are made read-only by applying the <code>readonly</code> boolean attribute, and being an attribute it is not affected by CSS.</p>
  
  <p>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 <em>printable version</em> hyperlink on my form. Clicking it displays a ... printable version of the document. It is mostly CSS stuff, my print.css looks like this:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>There are also a few javascript pieces, such as:</p>
  
  <ul>
  <li>Adding the <code>print</code> class to the html element</li>
  <li>Displaying tables without scroll bars</li>
  <li>A few other minor things, like hiding any popup overlays.</li>
  </ul>
  
  <p>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.</p>
  
  <p>Any ideas?</p>