：活动选择器仅在单击时发生

Question

使用以下HTML：

<input type="text">

CSS：

input[type="text"] {outline: none; border: thin solid red}
input[type="text"]:active {border: thin solid yellow}

我希望文本字段在激活时（用户输入时）会有黄色边框。但是，新样式仅在单击元素时适用。我怎样才能达到我想要的效果？

Answer 1

您应该使用:focus：

input[type="text"]:focus {border: thin solid yellow}

JSFiddle Demo

---

来自W3C：

  

:active伪类适用于用户激活元素的情况。例如，在用户按下鼠标按钮并释放它的时间之间。

     

:focus伪类适用于元素具有焦点（接受键盘或鼠标事件或其他形式的输入）。