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

Question

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

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

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

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

Answer 1

Ну, Ответ Дюопикселя совершенно безупречен. Если мы сделаем еще один шаг, мы сможем сделать его пуленепробиваемым.

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

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

Answer 2

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

Наслаждайтесь.

Answer 3

Это совместная работа по решению проблем стилевого оформления с помощью блоков выбора 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;
    }
}

Answer 4

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

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

...

Answer 5

Это будет предназначаться для всех версий Firefox

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

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

Answer 6

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

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

Answer 7

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

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

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

Ссылка

Answer 8

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

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

*:focus{outline:none !important;}   

Answer 9

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

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

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

if (FIREFOX) {
    //implement the code
}

Answer 10

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

работает 100%