Удаление пунктирных границ при нажатии

Я использую этот CSS для удаления точечных границ, которые появляются при нажатии гиперссылок

a:active, a:focus, input {
    outline: 0;
    outline-style:none;
    outline-width:0;
}

Это работает нормально, но не работает на кнопках ввода, которые имеют фоновые изображения.

Ответы

Ответ 1

Это не мое место, чтобы подвергать сомнению ваши дизайнерские решения, поэтому здесь вы идете.

Просто добавьте это к любой ссылке, которую вы хотите удалить пунктирной линией

onfocus="if(this.blur)this.blur()"

Ответ 2

Не работает нормально. Это делает невозможным навигацию по дизайну без мыши.

См. http://24ways.org/2009/dont-lose-your-focus для разумного компрометации.

Ответ 3

Вы можете добавить onclick: blur();, чтобы он сохранял табуляцию и не разрушал дизайн при нажатии.

Но для записи это похоже на работу с перекрестным браузером. Первая часть для IE, вторая для FF:

input, input:active, input:focus{
    outline: 0;
    outline-style:none;
    outline-width:0;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
}

Ответ 4

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

Создайте свои теги ввода, чтобы не иметь пунктирных границ; вы можете даже использовать класс для кнопок ввода, если у вас более одного стиля ( "Очистить", "Отправить", "Отмена" и т.д.).