Firefox, начиная с версии 23, изначально поддерживает элемент <input type="range">, но я не мог понять, как удалить пунктирный контур. Следующий CSS не имеет никакого эффекта:
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}
Кто-нибудь знает, как исправить эту проблему в Firefox?
Пример: http://jsfiddle.net/pF37g/
К сожалению, вы не можете!
Это ошибка в Firefox, и нет необходимости исправлять это, кроме исправления самой исходной базы (см. ниже).
Также см. Jonathan Watt blog (кто работает над этим):
Известные проблемы:
- стиль CSS по умолчанию по-прежнему нуждается в работе, а родная тематика (предоставление слайдеру внешнего вида операционной системы тема) еще впереди...
В ответ на комментарий в своем блоге об этой же проблеме он заявляет:
Прямо сейчас вы не можете - извините. Я подал ошибку 932410, чтобы сделать это возможно.
На момент написания здесь не было никакого прогресса, и неизвестно, когда будет доступно официальное исправление.
Обновление
Поскольку этот ответ был опубликован, исправлена ошибка. Теперь вы можете использовать (как указано в других ответах, но я включаю его здесь для полноты):
input[type=range]::-moz-focus-outer {
border: 0;
}
Как уже указывал Кен, нет способа удалить контур. Однако, если вы знаете фоновый цвет родительского элемента, есть "обход", чтобы "скрыть" контур. Предполагая белый фон, следующий CSS скроет пунктирный контур:
input[type=range] {
border: 1px solid white;
outline: 2px solid white;
outline-offset: -1px;
}
Ваш обновленный пример: http://jsfiddle.net/9fVdd/15/
Это может сделать с новой версией Firefox. Как указано здесь, эта ошибка исправлена. Таким образом, можно скрыть внешнюю пунктирную границу. Для этого установите ::-moz-focus-outer border равным 0, например:
input[type=range]::-moz-focus-outer {
border: 0;
}
Вот рабочий пример: http://jsfiddle.net/n2dsc/1/
В браузерах веб-браузера внешняя строка появится, если установлен -webkit-appearance: none;. Чтобы удалить его, просто установите :focus контур на none, например:
input[type=range]:focus {
outline: none;
}
Вот рабочий пример: http://jsfiddle.net/8b5Mm/1/
Если вы можете согласиться на элемент упаковки (вероятно, у вас уже есть обертка LI или P), вы можете использовать CSS только для FireFox, чтобы помещать ввод вне поля зрения и перемещать вид дорожки/большого пальца.
translateX - я думаю, что FireFox использует это, чтобы на самом деле скользить большой палец - поэтому придерживайтесь translateYtranslateY(-1000em)), то вы нарушите юзабилити для навигации по клавиатуре.Здесь ya go:
HTML
<span class="range-wrap"><input type="range" /></span>
CSS
.range-wrap {
overflow: hidden;
}
input[type='range'] {
-moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
-moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
-moz-transform: translateY(3em);
}
Пунктирный контур не является проблемой, выбран способ браузера показать элемент ввода. Вы можете установить tabIndex -1, что не позволит элементу input не сфокусироваться на вкладке и, следовательно, будет иметь контур:
<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>
Но после этого вы потеряете доступность клавиатуры. Лучше иметь доступную клавиатуру элемента input.
Вот скрипка: http://jsfiddle.net/pF37g/14/
Если какой-либо пользовательский стиль применяется к input[type='range'], то Firefox использует другую модель (beta), чтобы отобразить ввод диапазона.
Здесь вы можете увидеть 2 разных модели:
В настоящее время я не верю, что в настоящее время возможно иметь пользовательский диапазон ввода ввода в стиле CSS в Firefox, чтобы придерживаться outline: 0; с Firefox 27.0
Чтобы сделать это: ошибка была исправлена и теперь она работает с:
input[type=range]::-moz-focus-outer { border: 0; }
чтобы удалить все контуры всех используемых тэгов:
input::-moz-focus-inner, input::-moz-focus-outer { border: none; }
источник: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7
Вы не можете. Это швы, чтобы быть ошибкой в Firefox.
Он создает две контуры для элемента диапазона. Один из них может влиять на настройку css, а второй - устойчив к любым манипуляциям.
Я установил видимый контур, чтобы показать проблемы:
input[type='range']:focus {
outline: 5px solid green;
}
Здесь вы можете увидеть его:
У меня мало исследований в разделе конфигурации mozilla, добавьте это тоже
:-moz-any-link:focus {
outline: none;
}
a, a:active, a:visited, a:hover {
outline: 0;
}
затем
:focus {
outline: none;
}
затем
::-moz-focus-inner {
border: 0;
}
Здесь идет решение
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}