Удалить контур из окна выбора в FF

Можно ли удалить пунктирную линию, окружающую выделенный элемент в элементе выбора?

alt text

Я попытался добавить свойство outline в CSS, но он не работал, по крайней мере, не в FF.

<style>
   select { outline:none; }
</style>

Обновление
Прежде чем идти вперед и удалите контур, прочитайте это.
http://www.outlinenone.com/

Ответы

Ответ 1

Я нашел решение, но это мама всех хаков, надеюсь, это послужит отправной точкой для других более надежных решений. Недостаток (слишком большой, на мой взгляд) заключается в том, что любой браузер, который не поддерживает text-shadow, но поддерживает rgba (IE 9), не будет отображать текст, если вы не используете такую ​​библиотеку, как Modernizr (не тестировался, просто теория).

В Firefox используется цвет текста для определения цвета пунктирной границы. Так скажите, если вы...

select {
  color: rgba(0,0,0,0);
}

Firefox сделает прозрачную пунктирную рамку прозрачной. Но, конечно, ваш текст будет прозрачным! Поэтому мы должны каким-то образом отобразить текст. text-shadow приходит на помощь:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

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

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Это когда IE9 вступает в игру: он поддерживает rgba, но не text-shadow, поэтому вы получите явно пустое поле выбора. Получите свою версию Modernizr с обнаружением text-shadow и сделайте...

.no-textshadow select {
  color: #000;
}

Enjoy.

Ответ 2

Хорошо, Duopixels answer - это просто отлично. Если мы сделаем еще один шаг, мы сможем сделать его пуленепробиваемым.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Там вы идете, действительны только для Firefox, а уродливая пунктирная схема вокруг выбранного варианта отсутствует.

Ответ 3

Вот совместная работа решений по устранению проблем с установкой в ​​блоках выбора Firefox. Используйте этот селектор CSS как часть обычного CSS reset.

Класс удаляет контур по своему усмотрению, но также удаляет любое фоновое изображение (поскольку я обычно использую настраиваемую стрелку вниз, а стрелка вниз системы Firefoxes в настоящее время не может быть удалена). Если вы используете фоновое изображение для чего-либо другого, кроме раскрывающегося изображения, просто удалите строку background-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Ответ 4

В целом, элементы управления формами невозможно подстроить до такой степени точности. Там ни один браузер, о котором я знаю, поддерживает разумный диапазон свойств во всех элементах управления. Это причина, почему есть gazillion библиотеки JavaScript, которые "поддельные" формы управляют изображениями и другими элементами HTML и эмулируют их исходную функциональность с кодом:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Ответ 5

<select onchange="this.blur();">

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

Ответ 6

Это будет нацелено на все версии firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Возможно, вы захотите удалить! важно, если вы планируете отображать контур на других страницах вашего сайта, которые используют одну и ту же таблицу стилей.

Ответ 7

Попробуйте выполнить одно из следующих действий:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Ссылка

Ответ 8

Вот решение

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

Ответ 9

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

работает 100%