如果存在文本，请保持焦点样式答案

【问题标题】：Keep focus styling if text is present如果存在文本，请保持焦点样式
【发布时间】：2016-07-10 15:29:33
【问题描述】：

我有一个输入框。我在正常状态和焦点上对其进行自定义。

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

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

【问题讨论】：

某个文本还是任何文本？ CSS 无法根据文本框的内容来选择和设置元素样式。
@Harry 谢谢。任何文字。
实现起来还不是很直接。您的文本框是必填字段吗？
@Harry 是的。这是一个必填字段。
像this 这样的东西可以接受吗？

标签： css css-selectors

【解决方案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 />

【讨论】：

【解决方案2】：

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

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

另一种方法是检查 jquery.. 使用 ':contains' 选择器

【讨论】：

【解决方案3】：

您可以使用 :valid 伪类再添加一个选择器。

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

【讨论】：