Удалить пунктирную линию из элемента ввода диапазона в Firefox

Ответ 1

К сожалению, вы не можете!

Это ошибка в Firefox, и нет необходимости исправлять это, кроме исправления самой исходной базы (см. ниже).

Также см. Jonathan Watt blog (кто работает над этим):

Известные проблемы:

• стиль CSS по умолчанию по-прежнему нуждается в работе, а родная тематика (предоставление слайдеру внешнего вида операционной системы тема) еще впереди...

В ответ на комментарий в своем блоге об этой же проблеме он заявляет:

Прямо сейчас вы не можете - извините. Я подал ошибку 932410, чтобы сделать это возможно.

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

Обновление

Поскольку этот ответ был опубликован, исправлена ​​ошибка. Теперь вы можете использовать (как указано в других ответах, но я включаю его здесь для полноты):

input[type=range]::-moz-focus-outer {
    border: 0;
    }

Ответ 2

Как уже указывал Кен, нет способа удалить контур. Однако, если вы знаете фоновый цвет родительского элемента, есть "обход", чтобы "скрыть" контур. Предполагая белый фон, следующий CSS скроет пунктирный контур:

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

Ваш обновленный пример: http://jsfiddle.net/9fVdd/15/

Ответ 3

Это может сделать с новой версией 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/

Ответ 4

Если вы можете согласиться на элемент упаковки (вероятно, у вас уже есть обертка LI или P), вы можете использовать CSS только для FireFox, чтобы помещать ввод вне поля зрения и перемещать вид дорожки/большого пальца.

• Примечание 1 - не пытайтесь использовать translateX - я думаю, что FireFox использует это, чтобы на самом деле скользить большой палец - поэтому придерживайтесь translateY
• Примечание 2 - Обязательно проверяйте клавиатуру. Вы должны только перемещать вход на минимальное количество, чтобы получить пунктирные линии с глаз долой. Если вы разместите его вдали (translateY(-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);
}

http://jsfiddle.net/pF37g/98/

Ответ 5

Пунктирный контур не является проблемой, выбран способ браузера показать элемент ввода. Вы можете установить 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/

Ответ 6

Если какой-либо пользовательский стиль применяется к input[type='range'], то Firefox использует другую модель (beta), чтобы отобразить ввод диапазона.

Здесь вы можете увидеть 2 разных модели:

http://jsfiddle.net/pF37g/75/

В настоящее время я не верю, что в настоящее время возможно иметь пользовательский диапазон ввода ввода в стиле CSS в Firefox, чтобы придерживаться outline: 0; с Firefox 27.0

Ответ 7

Чтобы сделать это: ошибка была исправлена ​​и теперь она работает с:

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

Ответ 8

Вы не можете. Это швы, чтобы быть ошибкой в ​​Firefox.

Он создает две контуры для элемента диапазона. Один из них может влиять на настройку css, а второй - устойчив к любым манипуляциям.

Я установил видимый контур, чтобы показать проблемы: input[type='range']:focus { outline: 5px solid green; }

Здесь вы можете увидеть его:

http://jsfiddle.net/pF37g/97/

Ответ 9

У меня мало исследований в разделе конфигурации mozilla, добавьте это тоже

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

затем

:focus {
   outline: none;
}

затем

::-moz-focus-inner {
      border: 0;
}

Ответ 10

Здесь идет решение

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
}