Question

我有很多动态创建的输入元素。我想获取所有未禁用的元素，并为它们添加边框颜色。从CSS中，我可以得到所有禁用的内容：

    input[type="text"][disabled] {
    border-color: black;
}

这很有效。

我试图让那些没有禁用的人这样做：

    input[type="text"][enabled] {
    border-color: green;
}

由于某些原因，这不起作用，我没有收到错误。

我不想使用JS / JQuery的原因是浏览器在页面加载时最终使用超过100％的CPU。有罪的代码如下：

var elements = $(":input");
var elementsVisible = elements.prop("disabled");

if(!elementsVisible) { 
    $(this).css("border-color", "green") : 
}

如何从CSS文件中获取启用的输入字段？我顺便使用Extjs。如果可能并且使用JS / JQuery比CSS有更多的好处，我正在倾听： - ）

Answer 1

StringBuffer

input[type="text"] {
  background-color: green;
}
input[type="text"][disabled] {
  background-color: black;
}

编辑：即使<input type="text" name="text_1" /> <br /> <input type="text" name="text_1" disabled/> <br /> <input type="text" name="text_1" /> <br /> <input type="text" name="text_1" disabled/> <br /> <input type="text" name="text_1" />和[disabled]的工作方式相同，我也会使用:disabled。保持尽可能接近您的代码。

Answer 2

放两个

input[attr=value] { // your style definitions }

其次是

input[attr=value][disabled] { // your style definitions }

在同一个文件中。一切都将使用第一个规则，而不是使用第二个规则的禁用项目。

Answer 3

这对我来说非常好，启用的字段是浅绿色，禁用的字段是浅灰色：

<html>
<head>
    <style> 
        input[type=text] {
            background: red;
        }
        input[type=text]:enabled {
            background: lightgreen;
        }
        input[type=text]:disabled {
            background: lightgray;
        }
    </style>
</head>
<body>
    <form action="">
        First name: <input type="text" value="Mickey"><br>
        Last name: <input type="text" value="Mouse"><br>
        Country: <input type="text" disabled="disabled" value="Disneyland">
    </form>
</body>
</html>

目前，第一个带有“红色”的规则被忽略，但是如果你删除：启用了CSS规则，则默认值适用，启用输入变为红色。

input[type=text] {
  background: red;
}
input[type=text]:enabled {
  background: lightgreen;
}
input[type=text]:disabled {
  background: lightgray;
}

<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

使用CSS向特定元素添加值

3 个答案: