Menu
The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly".
Solutions with the CSS pointer-events property The second way of making the input text non-editable is using the CSS pointer-events property set to "none", which will stop the pointer-events.
The readonly attribute is a boolean attribute. 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).
You can either use the readonly or the disabled attribute. Note that when disabled, the input's value will not be submitted when submitting the form. Also It's important to remind that even using readonly attribute, you should never trust user input which includes form submissions.
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.
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');
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
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>
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With