css - 如果存在文本，则保持焦点样式

Question

我有一个输入框。我在正常状态和焦点下自定义它。

我的问题是，如果输入框中存在文本，如何保持焦点 CSS 样式？

.par input[type=sample]{
    width:75px;
    background-color: #000;
}
.par input[type=sample]:focus{
    width:50px;
    background-color: #FF0;
}

Answer 1

没有纯 CSS 选择器可以根据文本框的内容直接选择文本框并设置其样式。但如果该字段是必填字段(即，您可以添加 required 属性)，则可以使用 :valid 伪选择器来识别文本框是否有任何是否在其中输入文本，并根据它应用所需的样式。

input[type=text] {
  width: 75px;
  background-color: #000;
}
input[type=text]:focus,
input[type=text]:valid {
  width: 50px;
  background-color: #FF0;
}

<input type="text" required />
<input type="text" required />