:focus проблемы браузеров

Vika · August 24, 2012

Проблема следующая. Нет фокусировки на объект в следующих случаях

для Chrom

Фокус не возможно установить мышкой. Только горячей клавишей в сл. случаях.

button:focus

и

Input:focus

В случае <input type="button">

в IE все нормально

для IE вышеуказанные примеры работают, но нет фокуса в случае

a:focus

Вернее он есть но на долю секунды. Потом слетает.

Вопрос:

Можно ли заставить хром на кнопках фокусироваться или в IE продлить время фокусировки?

Хочется сделать без скриптов. Замучилась уже.

Пример

<!DOCTYPE html >

<html>

<head>

<style>

p {

opacity:0; /* устанавливаем начальное состояние прозрачности надписи */

}

a:focus + p { /* Выводим надпись при фокусировке (не работает в IE!!!!) */

opacity:1;

}

input:focus + a + p, button:focus + input + a + p { /* Выводим надпись при фокусировке (не работает в CHROM!!!!) */

opacity:1;

}

</style>

</head>

<body>

<button tabindex= "1"> Пример не работает в Chrom </button>

<a href="#top" tabindex= "3"> Пример не работает в IE </a>

<p>Эта надпись должна появится при нажатии на кнопку или ссылку вверху и пропасть при нажатии в любом месте экрана</p>

</body>

</html>

Question