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

Question

我希望对我的表单中所有必填但为空的输入框应用一个特殊的样式。

当我在CSS中编写以下代码时，它确实起作用：

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

但是当我写下这样的代码时，它无法工作：

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

我知道可以使用jQuery来实现，但是我想尝试在纯CSS中实现，如果可能的话。

这可以吗？

提前感谢，
Timofey。

- Ibolit

---

可能是使用CSS匹配空输入框的重复问题。 - hakre

Answer 1

如果您不必支持旧的IE版本，您可以在输入框上设置placeholder属性为某个值（可以是空格，但必须有值），然后使用:placeholder-shown来选择该输入框。

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

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

- TommyZG

---

但是输入类型文件似乎从未显示：placeholder-shown（FF） - Fanky

Answer 2

你可以使用伪类选择器:invalid来实现这个功能 - 只有在浏览器验证失败时，它才会匹配输入。如果你设置了required，只要它为空，它就是无效的。

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

input:invalid {
  border-color: red;
}

<input type="text" required>

- Falco

---

如果我不想要必需輸入，該怎麼辦？ - Fanky

@Fanky 如果你想让样式在没有 JavaScript 的情况下自动更新，你需要使用 required 属性或者使用 placeholder 标签。但是对于文件输入框，你很可能还是需要涉及 JavaScript。 - Falco

好的，我最终使用了 jQuery( 'input[type=file]' ).change( function( e ) { this.defaultValue = this.value; } ); 和 CSS :not([value=""])，但后者没有前者那么有效。 - Fanky

Answer 3

搜索了 css样式的空输入，找到以下内容：

使用CSS匹配空输入框

你需要使用JavaScript。

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

- Yuji 'Tomita' Tomita

---

谢谢，但这有点令人难过 ;) - Ibolit

Answer 4

试试这个

<input type="text" value="">

input:not([value=""]) {
    /* Your code */
}

- Hafizur Rahman