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

另一种方法是检查jquery ..使用＆＃39;：contains＆＃39;选择

Answer 3

你可以再使用一个选择器：valid伪类。

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

如果文字存在，请保持焦点样式

3 个答案: