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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

вы используете: активный селектор

посмотрите его в действии здесь

http://jsfiddle.net/gctJq/1/

стоит отметить, что он будет работать во всех ожиданиях современного браузера ...звук барабана ... то есть! ну, это вроде как работает, т.е. 8, но тогда вы не можете набирать текст вместо этого, вы бы использовали фоновое изображение для ввода текста, чтобы убедиться, что он выглядитТо же самое для всех браузеров, что я бы сделал в вашем случае, отключив кнопку отправки при отправке, чтобы было ясно, для использования, что данные были отправлены и обрабатываются.что-то вроде этого также будет указывать, что это на самом деле.

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