如何创建 CSS 类以使输入字段为只读答案

【问题标题】：How to create a CSS class to make input field is readonly如何创建 CSS 类以使输入字段为只读
【发布时间】：2014-09-15 11:05:07
【问题描述】：

我想创建一个 CSS 类来使输入字段是只读的。

这是我的尝试：

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

【问题讨论】：

不能使用 CSS 修改 DOM 属性。

标签： javascript css

【解决方案1】：

您不需要对 CSS 做任何事情。 html 输入中已经存在一个只读属性：

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

【讨论】：

@chaya 你可以使用pointer-events: none，但它是lacks support

【解决方案2】：

是的，你可以使用 :disabled 伪类，例如

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

}

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

【讨论】：

【解决方案3】：

你只能在 jquery 中做到这一点

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

【讨论】：