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 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>
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;
}
pointer-events: none, but it lacks supportYes, you can use the :disabled pseudo class, e.g.
input.myClass:disabled {
/* style declaration here */
}
Or you can use solution suggested here
you can do it in jquery only
function changeCss()
{
$('#desg').prop('disabled', true);
}
