Управление вводом текста с использованием CSS не потеряет стиль «Фокус»

Question

У меня есть стандартное текстовое поле ввода, которое я стилизовал, используя элементы класса css и psuedo 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;
}