javascript - 使用 CSS 为特定元素添加值

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

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 的工作方式相同，我还是会使用 :disabled。让它尽可能靠近您的代码。