仅为启用的输入定义CSS

Question

如何仅为已启用的输入定义CSS。

我不想要第一个解决方案，因为这会强制重新定义启用的样式。

input[type="text"] {
        background-color: white;
    }
input[type="text"][disabed] {
        background-color: #ECFFEC;
    }

这个CSS3解决方案有效，但不适用于IE：

input[type="text"]:enabled {
    background-color: #ECFFEC;
}

我也试过jQuery解决方案，但是这个解决方案失败， $（“input：enabled”）为null

$("input:enabled").css("background-color","#ECFFEC");

我更喜欢完整的CSS解决方案（或者告诉我哪种解决方案更受欢迎）？

Answer 1

正如您所提到的，纯CSS无法在某些旧版浏览器中运行。您在'jQuery解决方案'中尝试过的JavaScript应该可以工作，虽然我将其更改为这样，这样您就可以在CSS文件中添加CSS而不是在JS中（更容易维护）。

$('input:enabled').addClass('foo');

至于为什么它可能会返回null，也许你没有在DOM上执行它？

$(function() {
    $('input:enabled').addClass('foo');
});

Answer 2

只需在禁用的元素中添加.disabled类。

input[type="text"].disabled {
    background:blue;
}

适用于所有浏览器，因为您不必依赖特定的选择器。

检查this fiddle。

当你启用它时，你必须删除“禁用”类，它将获得启用的样式。

Answer 3

解决方案是使用CSS3并声明2个样式，在1和2之间混合：:enabled:not([readonly])和[disabled]。

input[type="text"]:enabled:not([readonly]){
    background-color: #ECFFEC;
}

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

唯一不好的部分是它不适用于IE，但不需要覆盖CSS属性：这是最差的。

感谢您的提示