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

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 > 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?

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.

How to make text input non-editable using CSS?, Confirming form information in read-only/read-write controls still being able to submit the information along with the rest of the form. the inputs look like clickable fields, making them look more like read-only paragraphs. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The readonly attribute can be set to keep a user from changing the value until some other conditions have been met (like selecting a checkbox, etc.).

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');

:read-only, Form elements with a "readonly" attribute are defined as "readonly". Version: CSS3. Browser Support. The numbers in the table specify the first browser version� Can I make the span 's behavior look like a read-only and fixed sized <input type="text"> using CSS or java script ? I want the displayed message will has the fixed length displayed and user can scroll to see the whole message if the message is so long, just like the input control of the following code:

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

CSS :read-only Selector, Example. An HTML form with a read-only input field: Then, a JavaScript can remove the readonly value, and make the input field editable. Note: A form will still� The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors: input[type=text] - will only select text fields; input[type=password] - will only select password fields; input[type=number] - will only select number fields; etc..

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.

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Disable Text Input field 
        </title> 

        <style> 
        .inputClass { 
            pointer-events: none; 
        } 
        </style> 
    </head> 

    <body style = "text-align:center;">
        Non-editable:<input class="inputClass" name="input" value="NonEditable"> 

        <br><br> 

        Editable:<input name="input" value="Editable"> 
    </body> 
</html>                  

HTML input readonly Attribute, Then, a JavaScript can remove the readonly value, and make the input field editable. Input Example. An HTML form with a read-only input field:. 48 Is it possible to make input fields read-only through CSS? May 29 '13 43 Why cannot C# generics derive from one of the generic type parameters like they can in C++ templates?

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

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

jsFiddle File

HTML readonly Attribute, The :read-write and :read-only selectors are two mutability aiming at making form styling easier based on disabled, readonly and. [contenteditable]:read- only { cursor: not-allowed; } /* Any enabled text input or enabled textarea or element with the contenteditable attribute Required fields are marked *. The HTML shown below, <input type="text"/> is displayed in a browser like so: When I add the following text, The quick brown fox jumped over the lazy dog. Using the HTML below, &lt;in Stack Overflow

:read-write / :read-only, :read-only is a CSS pseudo-class selector that matches any element that does not In other words, it matches elements that are not editable by the user. < textarea> s that are neither read-only nor disabled (similar to the input s). border: 1px solid #888; } textarea:read-only:hover { cursor: not-allowed; }� As @Torkil-Johnsen mentioned in a comment below, you might want to give a different style to make it more obvious, but to just remove it is very bad for accessibility (e.g. people who only use a keyboard or other assistive device to tab through elements).

:read-only, To select elements that are read-only, use the CSS :read-only selector. ExampleYou can try to run the following code to implement the� form { /* This bit sets up the horizontal layout */ display:flex; flex-direction:row; /* This bit draws the box around it */ border:1px solid grey; /* I've used padding so you can see the edges of the elements. */ padding:2px; } input { /* Tell the input to use all the available space */ flex-grow:2; /* And hide the input's outline, so the form looks like the outline */ border:none; } input

Style <input> elements with a "readonly" attribute with CSS, Attribute of: How To Use Input To Create Form Fields In HTML: Easy Tutorial; What does Input Disabled HTML Attribute Explained For Inexperienced Coders do? The disabled and readonly attributes have similar effects — in fact, they look the same It is possible for a malicious user to override your form input's disabled� Upon activation, you need to visit Custom Fields » Field Groups page and click on the add new button. A field group is like a container of a set of custom fields. This allows you to add multiple panels of custom fields. Now, you need to provide a title for your field group and then click on the the ‘Add Field’ button.

Comments
  • on the printable version, could you not just add the attribute to the html tag?
  • Don't think it's possible with CSS. CSS is for styling.
  • This doesn't answer the question, but why not use a media query like @media print for making a printer-friendly version?
  • I want to show the printable version before the user actually selects print from the browser menu. @media print is only activated in the browser's print preview dialog or when actually printing. I want to give a printable version, but on the screen media.
  • I was looking for similar thing. And thanks for the answer. But there is an issue i found out in the fiddle.. When we focus it and press the delete button the text area is getting deleted. Is there any solution for that? I am using mozilla firefox
  • @Rohith this doesn't appear to be an issue in Chrome. As I mentioned though, ideally the readonly property should be given to the element (either through direct markup modification or with JavaScript).
  • Interesting, in Chrome it behaves as expected - navigates away from the page.
  • With firefox 27, the "user-select:none" only prevents me to select text in the field with the mouse but not with keyboard shortcut (Shift + arrows), which is ridiculous, or changing its content (erasing, writing). Under Opera 12, the field is totally normal.
  • The Fiddle under Firefox is quite bizarre - and might be a bug. I can click in the field but pressing 'delete' moves the keyboard caret to the right one character and THEN deletes the character following it. The result is that every other character in the text field is deleted.
  • a couple of typos, with query 1.9+ it should be $('input').prop('readonly', true);
  • This should be the marked answer, as the selected one no longer works, whereas this does
  • It can still be editable by tabbing through the element.