Question

我想创建一个CSS类，使输入字段为readonly。

这是我的尝试：

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

Answer 1

您不需要使用CSS做任何事情。 html输入中已存在readonly属性：

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

See more here

没有这样的CSS属性可以只是简单地输入，但在这个question中，@ James Donnelly给出了一个解决方法来实现：

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

Answer 2

是的，您可以使用：disabled伪类，例如

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

}

或者您可以使用建议的解决方案here

Answer 3

你只能在jquery中完成它

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

如何创建一个CSS类来生成输入字段是readonly

3 个答案: