Question

输入表单中是否包含包含输入的CSS选择器？

我的意思是输入字段，用户在其中输入了一些内容（PS：我知道:valid和:invalid，而这并不是我想要的。）

Answer 1

我不相信任何东西，但是有一个规范是工作草案，其中添加了:blank。根据规范，这将使您知道何时输入字段为空。您也可以轻松地完成逆运算。

但是，这只是一个工作草案。因此尚不可用。 Docs here。

同时，您可以始终使用Javascript根据用户输入的存在来添加/删除类。

Answer 2

您可以使用input [value]选择器，但这仅适用于页面加载时的dom，因此您将需要一些JavaScript来处理输入更改（如下所示）。

var inputs = document.querySelectorAll('input');

for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', function(e) { 
    
    if (e.target.value !== "")
      e.target.classList.add('hasValue');    
    else
      e.target.classList.remove('hasValue');  
  })
}

input[value] {
  border: 1px solid red;
}

.hasValue {
  border: 1px solid red;
}

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

Answer 3

使用伪类:placeholder-shown和:not()组合。这样做的目的是在没有占位符的情况下更改输入的样式，在没有占位符的情况下更改输入的样式。

该技巧仅在有占位符的情况下起作用，因此请确保您至少有一个空的占位符：

input:not(:placeholder-shown) {
  background:pink;
}


input {
 border:1px solid;
}

<input type="text" placeholder=" ">

包含输入的Input字段是否有CSS选择器？

3 个答案: