CSS将样式应用于空输入([value =''])

Question

我想对我的表单中的所有输入应用一种特殊的样式,这些输入是必需的并且是空的.

当我写在我的CSS中时,它确实有效

input[required='required'] {
    bla-bla-bla;
}

但是当我写作时,它不起作用

input[value=''] {
   bla-bla-bla;
}

我知道我可以使用jQuery做到这一点,但我想在纯css中做到这一点,如果有可能的话.

可以这样做吗？

蒂莫菲,提前谢谢你.

Answer 1

您可以使用Pseudo-Selecot :对此无效 - 仅当元素的浏览器验证失败时才会匹配输入.如果设置了所需的元素,只要它是空的,它就是无效的.

所有现代浏览器都支持这种CSS类:浏览器兼容性

input:invalid {
  border-color: red;
}

<input type="text" required>

Answer 2

搜索css样式空输入,发现以下内容:

使用CSS匹配空输入框

你需要使用JavaScript.

要使用CSS样式,您必须value=''在HTML中键入属性:但无论值是否在会话中更改,CSS都将匹配.

Answer 3

如果不必支持较旧的IE版本，则可以将placeholder输入中的属性设置为某些内容（可以为空格，但必须为某些内容），然后将其:placeholder-shown用于定位该输入。

<input type="text" class="custom-input" placeholder=" ">

.custom-input:placeholder-shown {
    /* Your rules */
}