键盘聚焦的样式输入字段

Question

我试图在输入字段上设置不同的样式，输入字段是通过键盘(而不是鼠标)来聚焦的。

我知道可以通过使用伪类:focus-visible来区分鼠标和键盘对其他元素的关注，但由于等级库的原因，它无法处理输入。

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element.

For example, UAs typically display focus indicators on text fields any time they’re focused, to draw attention to the fact that keyboard input will affect their contents.

On the other hand, UAs typically only display focus indicators on buttons when they were focused by a keyboard interaction (such as tabbing through the document)—because it’s not always immediately obvious where the focus has gone after such an interaction, but is sufficiently self-evident when the button was focused by more obviously-targetted interactions, like clicking on the button with a mouse pointer.

当输入字段被鼠标或键盘聚焦时，有什么解决方案来区分样式吗？

Answer 1

除了:hover或:focus之外，您还可以添加其他样式，如果这对您有效的话。示例如下(https://codepen.io/alekskorovin/pen/OJxJaQB)：

​

input {
  outline: 4px dashed transparent;
}
input:focus-visible {
  outline: 4px dashed darkorange;
}
input:hover:focus-visible {
  outline: 4px dashed darkgreen;
}
input:hover {
  outline: 4px dashed transparent;
}

<input type="text" />

​