使用css的文本输入控件不会丢失“焦点”样式

Question

我有一个标准输入文本框，我使用css和psuedo-class元素Hover和Focus进行了样式设置。我使用的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;
}