Question

我有一个运行脚本的表，它将tablefilter放在顶部。表格字体是白色的，因此它使输入框中的文本也变白，您无法看到键入的内容。我在CSS中做到了这一点：

input, select, textarea{
color: black;
}

textarea:focus, input:focus {
color: black;
}

上述唯一的问题是如果你失去对盒子的注意力，它会变回白色。因此，您输入内容并移至下一个框，然后再次变为白色。一旦我输入文本，我怎样才能使它在CSS中工作，即使我在文本框中失去焦点，它也会保持黑色？

Answer 1

此处：http://jsfiddle.net/fw26qevk/1/

#myTextBox {
    border: 3px solid gray;
    width: 368px;
    height: 33px;
    color: silver;
    font-size: 22px;
    padding-left: 10px;
    padding:5px; 
    color:black

}

#myTextBox:focus{
    outline:none;
    border-color:blue;
    box-shadow:0 0 10px blue;
    color:blue;
}

您也可以使用CSS，但在进出焦点时在其上添加一个类。

$('input[type="text"]').focus(function() {
    $(this).addClass("focus");
});

$('input[type="text"]').blur(function() {
    $(this).removeClass("focus");
});

Answer 2

您需要calculate the specificity of your selectors来确定正在应用哪个*。我可以告诉你，没有看到你的第一个被你的类覆盖，你的表格是白色的。您需要为input, select, textarea定义扩展该选择器，使其比table-font-white-color选择器“更具体”。

以此为例：

table td textarea,
table td input {
    color: white;
}
textarea:focus, 
input:focus {
    color: black;
}
/* .test class makes it more specific than the first above. */
table.test td textarea,
table.test td input {
    color: red;
}
/* .test class makes it more specific than the second above. */
table.test td textarea:focus,
table.test td input:focus {
    color: blue;
    font-weight: bold;
}

http://jsfiddle.net/vydrt8jq/

^{*有各种各样的工具可以帮到你。}

输入框文本颜色与CSS天气对焦或不

2 个答案: