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

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

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

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

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

Я нашел решение, но это мать всех хаков, надеюсь, оно послужит отправной точкой для других более надежных решений. Обратной стороной (на мой взгляд, слишком большой) является то, что любой браузер, который не поддерживает, 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;
}

Наслаждаться.

Что ж, ответ Duopixel просто идеален. Если мы пойдем дальше, мы сможем сделать его пуленепробиваемым.

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

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

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

Класс удаляет схему в соответствии с вопросом, но также удаляет любое фоновое изображение (поскольку я обычно использую настраиваемую стрелку раскрывающегося списка, а стрелка раскрывающегося списка системы Firefox в настоящее время не может быть удалена). Если вы используете фоновое изображение для чего-либо, кроме раскрывающегося, просто удалите строку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;
    }
}

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

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

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

Как правило, элементы управления формы невозможно стилизовать с такой степенью точности. Я не знаю ни одного браузера, который поддерживает разумный набор свойств во всех элементах управления. Вот почему существует огромное количество библиотек JavaScript, которые «подделывают» элементы управления формой с изображениями и другими элементами HTML и эмулируют свою исходную функциональность с помощью кода:

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

...

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

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

Попробуйте одно из этих:

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

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

Ссылка

Вот и решение

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

Удалите контур / пунктирную границу из всех выбираемых тегов Firefox.

Поместите эту строку кода в свою таблицу стилей:

*:focus{outline:none !important;}   

Добавьте border-style: none к вашему выбору в CSS.

select {
border-style: none; }

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

работает 100%

Это уберет фокус с selectэлемента и контура :

$("select").click(function(){
    $(this).blur();
});

Хотя это не лишено недостатков в других браузерах. Вы захотите проверить браузер, который использует пользователь:

if (FIREFOX) {
    //implement the code
}