使用css的文本输入控件不会失去“焦点”风格

Question

我有一个标准输入文本框，我使用 css 和伪类元素悬停和焦点对其进行样式设置。我使用的CSS非常简单：

.riTextBox:hover,
.riTextBox:focus
{
    border: solid 1px #F1C15F;
}

.riTextBox
{
    border: solid 1px #7394BE;
    border-radius: 3.5px;
}

一切都工作得很好，除非文本框中有文本并且用鼠标选择，并且当您选择文本时，您离开了文本框的边界（鼠标按钮仍然按下） ，然后将鼠标移至文本框外的某处。您会注意到文本框边框仍然突出显示，就好像它从未失去焦点一样。

看起来文本框的onselect事件与onblur冲突，但我不确定。请参阅此处重现此令人沮丧的问题：

http://jsfiddle.net/pBkhT/7/

感谢您可以提供的任何帮助！

Answer 1

这个答案有点晚了，但它适用于你的问题。只需删除与悬停事件耦合的焦点事件即可。您原来的悬停边框仍将保持焦点（当用户单击该框时），但是当用户将鼠标移开时，悬停样式将消失，即使鼠标按钮仍然按下也是如此。

.riTextBox
{
    border: solid 1px #7394BE;
    border-radius: 3.5px;
}

.riTextBox:hover
{
    border: solid 1px #F1C15F;
}