Кнопка HTML отправки не заметно опускается при нажатии, если установлена ​​граница

Question

Я разработал красивые кнопки формы HTML (для типа ввода = «Отправить»). Но я понимаю, что они больше не опускаются при нажатии. Обычно это не проблема, потому что нажатие кнопки немедленно приведет вас к следующей странице. А на Firefox это немного видно, потому что пунктирный контур появляется вокруг текста кнопки. Но пользователь попытался загрузить большое изображение на Safari, и все это было совсем не ясно, что кнопка была нажата или загружено изображение.

Итак, как лучший способ иметь стилизованный представление с хорошей границей, который делает его очень понятно, когда его нажаты? Я мог бы использовать JavaScript для обнаружения нажатия и неуместного и изменения и изменения класса соответственно, но я думаю, что я надеюсь, что есть более простой способ сделать это? Если нет, есть ли хорошая библиотека jQuery, чтобы иметь дело с этим?

Вот что я говорю: http://jsfiddle.net/gctjq/

Только что нашел jquery ui кнопка виджетДействительно Угадай, это то, что я искал, если бы не было легко стандартного решения HTML. Я уже использую jQuery ui для других элементов, задаваясь вопросом, насколько сложно настроить это, чтобы получить кнопки во всех размерах и цветах. Это, кажется, больше подходит для 1 стандартного размера и цвета.

Answer 1

Вы используете: Active Selector

увидеть это в действии здесь

http://jsfiddle.net/gctjq/1/

Стоит отметить, что он будет работать во всем современном браузере ... Барабан звук ... Т.е.!Ну, это вроде работы в IE 8, но тогда вам не разрешено иметь текст, набранный вместо этого, вы будете использовать фоновое изображение, чтобы ввести свой текст, чтобы убедиться, что он выглядит одинаково для всех браузеров, что я бы сделал в вашем случае Отключает кнопку «Отправить» при отправке, что делает его совершенно ясно для использования, чтобы данные были отправлены и обрабатываются. Что-то вроде этого также указывает на то, что это на самом деле.

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />

Answer 2

Когда вы указываете границу, он несколько удаляет стиль по умолчанию браузера.

Вам нужно будет вручную указать, как кнопка должна выглядеть при нажатии.

Также имейте в виду, что IE добавляет границу 1PX на кнопку «Отправить», когда любой элемент на форме фокусируется. Единственный способ (я знаю), чтобы избавиться от этого, - это подать заявку border: none; на кнопку и имитировать границу другим способом.