How to create a CSS class to make input field is readonly

Question

I want to create a CSS class to make input field is readonly.

Here is my try:

 <style>
 .enableInput input[readonly] {
  color: #CB000F;
 }
</style>
<script>
function changeCss()
{
$("#desg").addClass("enableInput input");
}
</script>
</head>
FirstName:<input type="text" name='fname' id='fname' onBlur="changeCss();">
Designation:<input type="text" name='desg' id='desg' value='Software Engr'>
</html>

You cannot use CSS to modify DOM Properties. – Praveen Kumar Purushothaman Sep 15 '14 at 11:06 — Praveen Kumar Purushothaman, Sep 15 '14 at 11:06

score 6 · Answer 1 · edited May 23 '17 at 10:33

6

You don't need to do anything with CSS. there is already a readonly attribute present in html input:

<input type="text" name="country" value="Norway" readonly>

See more here

There is no such CSS property which would simply make an input readonly, but in this question, @James Donnelly gave a workaround to achieve that:

.enableInput{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;          
}

edited May 23 '17 at 10:33

Community

1
1

answered Sep 15 '14 at 11:06

Abdul Jabbar

2,573
5
23
43

@chaya you can use `pointer-events: none`, but it [lacks support](http://caniuse.com/pointer-events) – Vucko Sep 15 '14 at 11:13

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

Yes, you can use the :disabled pseudo class, e.g.

input.myClass:disabled {
/* style declaration here */

}

Or you can use solution suggested here

edited May 23 '17 at 10:33

Community

1
1

answered Sep 15 '14 at 11:09

Scription

646
3
12
21

score 0 · Answer 3 · answered Sep 15 '14 at 11:19

0

you can do it in jquery only

function changeCss()
{ 
$('#desg').prop('disabled', true);
}

answered Sep 15 '14 at 11:19

user3921841

11
2

How to create a CSS class to make input field is readonly

3 Answers3