фокус на кнопке html

Ну, и заодно - как простым и доступным способом "поднять" на пиксель надпись (отцентрировать по вертикали) в ФФ и то же по отношению к <input type="button"> в ИЕ9.Тоже, первая кнопка - <input type="button">, вторая - <button>. Как видно, ФФ еще и удлинил кнопки.Допускаю, что решение простое и просто прошло мимо незамеченным. Спасибо.

.custom-button:active, .custom-button:focus:active {

.custom-button:focus, .custom-button:hover:focus {

background-image:url(../images/button-background.png);

В кои то веки решил сделать для проекта "правильную" кнопку, которая ведет себя "правильно" не только с мышкой, но и с клавиатурой.Нормальных вариантов реализации, очевидно, 2 - на ссылках и, собственно, сама кнопка (очевидней, конечно, второй вариант, но он не лишен недостатков, поэтому упомянул именно о двух). Да, кстати, рассматривается использование в "нормальных" браузерах, исключается применение ИЕ6-7 и Оперы.Ссылки (c атрибутом tabindex):то есть просто кнопка, кнопка с наведением, кнопка с фокусом (или наведение с фокусом) и активная кнопка.Очевиные минусы:- необходимость использования, собственно, ссылки (со всеми "прелестями" - наличие href, невозможность делать дефолтный сабмит, небольшая погрешность центрирования по вертикали в разных браузерах - в пределах пиксела, но вылазит);- обработка нажатия только через Enter, пробел не работает (без дополнительных скриптов);- клавишное нажатие никак не отмечается (Enter срабатывает по keydown, а не keypress);- при наличии в форме кнопки submit и наведенном фокусе на нашу кнопку при нажатии на Enter форма не отправляется.Кнопки (скрины из Хрома):тоже простая кнопка, кнопка с фокусом, кнопка с наведением мыши и активная кнопка. Привожу скрины двух кнопок, чтобы показать, что разницы между <button>Button</button> и <input type="button" value="Button"/> нет (правда, ее нет для Хрома и ФФ - на пиксель ниже, а в ИЕ9 <button> по центру, а <input> на пиксель ниже).Надо использовать такую реализацию, но есть одно "но", относящееся к Хрому:- если на кнопке фокус, то клик по ней (состояние :active) визуально приводит кнопку в состояние :hover, в остальных нормально;- при клике на кнопку (или нажатию на пробел) кнопка теряет фокус, чего не наблюдалось с ссылкой.Такое поведение в Хроме мне крайне удивительно и непонятно - почему уходит фокус? Понятно, в Сафари такая же ерунда.Для объективности прилагаю стиль кнопки:

Ответов: 8   Последнее сообщение: 30 июл 12, 14:15

Добро пожаловать в форум, GuestPP>>PP

CSS и кнопка / HTML, JavaScript, VBScript, CSS / Sql.ru