使用 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。使其尽可能靠近您的代码。

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>

目前第一个带有 "red" 的规则被忽略，但如果你删除 :enabled 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 为特定元素添加值

adding values to specific elements using CSS

javascript

css

jquery

extjs