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

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 />

Answer 2

input[value=""]:focus {
    background-color: yellow;
}

<input onkeyup="this.setAttribute('value', this.value);" value="" />

另一种方法是使用 ':contains' 选择器来签入 jquery

Answer 3

截至 2024 年 12 月 2 日，伪选择器

:placeholder-shown

得到广泛支持。

它针对带有可见占位符的所有输入。 当输入有值时，占位符将被隐藏。

将其与

:not(:placeholder-shown)

组合，它的目标是占位符不可见的输入。

因此

input:not(:placeholder-shown)

可能是一种可行的方法（与字段有效性无关）。

input {
border: 1px solid black
}

input:not(:placeholder-shown) {
 color: green;
 border-color: green;
}

<input placeholder="" value="Some value" />
<input placeholder="" value="" />
<input placeholder=""  />

Answer 4

你可以多一个带有 :valid 伪类的选择器。

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