是否有 CSS 选择器检查输入是否包含任何文本？

Question

抱歉，如果标题不清楚，但我正在努力做到这一点，以便当我在输入中输入内容时，它会更改其周围的边框颜色。

现在我正在使用 :focus 选择器，但是当我点击输入 window 时，边框会变回原来的颜色。

Answer 1

你可以试试这个代码

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

Answer 2

您可以使用 :valid 选择器：

The :valid selector allows you to select elements that contain valid content, as determined by its type attribute. :valid is defined in the CSS Selectors Level 3 spec as a “validity pseudo-selector”, meaning it is used to style interactive elements based on an evaluation of user input.

示例：

input:valid {
  background: blue;
}

<label>
  Name
  <input name="name" type="text" required>
</label>

是否有 CSS 选择器检查输入是否包含任何文本？

Is there a CSS selector that checks if an input has any text in it?

html

css

css-selectors