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

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

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

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

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

11 80
html css xhtml-1.0-strict firefox

11 ответов:

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

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

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

66

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

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

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

143

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

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

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

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

...

10

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

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

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

6

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

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

5

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

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

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

ссылка

2

вот и решение

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

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

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

*:focus{outline:none !important;}
0

Это позволит удалить фокус из select элемент и контур:

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

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

if (FIREFOX) {
    //implement the code
}
0
    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

работает 100%

-2