CSS将样式应用于空输入（[value ='']）

Question

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

当我在我的CSS中写作时，它确实有效。

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

但是当我写

时它不起作用

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

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

能做到吗？

提前谢谢你，
提莫菲。

Answer 1

您可以使用Pseudo-Selecot ：无效 - 只有在元素的浏览器验证失败时才会匹配输入。如果您设置 required 元素，只要它是空的，它就会无效。

所有现代浏览器都支持此CSS类：Browser Compatibility

input:invalid {
  border-color: red;
}

<input type="text" required>

Answer 2

搜索 css样式空输入并找到以下内容：

Matching an empty input box using CSS

您需要使用JavaScript。

要使用CSS样式，您必须在HTML中键入属性：value=''，但无论值是否在会话中改变，CSS都会匹配。

Answer 3

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

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

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