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

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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>

Solution 4 - Javascript

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

Solution 5 - Javascript

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

Solution 6 - Javascript

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.

Solution 7 - Javascript

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.

Solution 8 - Javascript

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.

Solution 9 - Javascript

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:

<input type="text" value="12345" id="readCaptch" readonly="readonly" class="form-control" />

live Example: https://codepen.io/alpesh88ww/pen/mdyZBmV

also you can see why i was done!! (php captcha): https://codepen.io/alpesh88ww/pen/PoYeZVQ

Solution 10 - Javascript

Hope this will help.

    input[readonly="readonly"]
{
    background-color:blue;
}

reference:

http://jsfiddle.net/uzyH5/1/

Content Type	Original Author	Original Content on Stackoverflow
Question	mark	View Question on Stackoverflow
Solution 1 - Javascript	James Donnelly	View Answer on Stackoverflow
Solution 2 - Javascript	Faust	View Answer on Stackoverflow
Solution 3 - Javascript	Jee Mok	View Answer on Stackoverflow
Solution 4 - Javascript	Jscti	View Answer on Stackoverflow
Solution 5 - Javascript	Roy Sonasish	View Answer on Stackoverflow
Solution 6 - Javascript	David Jashi	View Answer on Stackoverflow
Solution 7 - Javascript	sAnS	View Answer on Stackoverflow
Solution 8 - Javascript	Ian Danforth	View Answer on Stackoverflow
Solution 9 - Javascript	Alpesh Panchal	View Answer on Stackoverflow
Solution 10 - Javascript	RachithaS	View Answer on Stackoverflow