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


97

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

альтернативный текст

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

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

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


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

Боюсь, что это тоже факт, но все же надеюсь, что это окажется неправым: D
Мартин,

Действительно ли в mozilla работают люди, которые думают, что эта дурацкая пунктирная линия выглядит хорошо? Почему мы вообще должны это удалить?
billynoah

Ответы:


74

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

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


Спасибо, дружище, скоро попробую :)
Мартин

Единственное решение, которое действительно работает (с использованием FF 20). Поздравляю!
Жилберто Торрезан,

4
Это должно заботиться о каждом FF и только FF:@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }
Timo Kähkönen,

Будет ли это влиять на css в Chrome и других браузерах?
Dadhich Sourav

166

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

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

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


1
Интересно, что это решение не так уж и надежно, как ответ Duopixel. Если вы используете эффект перехода с вашим полем выбора (например, -moz-transition), пунктирный прямоугольник будет отображаться на время перехода, а затем исчезнет. То есть, если вы укажете «-moz-transition: all 0.5s easy;», вы увидите поле со списком на полсекунды с этим решением, тогда как вы не увидите его вообще с ответом Duopixel. Вы можете обойти это, установив для всего элемента select атрибут прозрачного цвета, но тогда вы вообще не увидите никакого текста, если поле не имеет фокуса.
Джон

1
Изменить: выше должно быть сказано: «... вы увидите пунктирную рамку на полсекунды с этим решением ...». Я больше не могу редактировать комментарий. Во всяком случае, 'color: rgba (0,0,0,0);' свойство - это то, что фиксирует переход, и оно должно быть в элементе select; "-moz-focusring" не годится. Также интересно, что по какой-то причине у меня нет никаких проблем как в IE9, так и в Chrome с решением Duopixel, так что то, о чем в конце концов он говорил с Modernizr, было для меня совершенно ненужным.
Джон

Конечно, он появится, если вы укажете переход. Использование allвнутри переходов похоже на стрельбу из пистолета Гатлинга на лету.
Fleshrinder

1
Это решение или решение Duopixel не работает в FF 33.0.3 в Mac Mavericks. Вместо пунктирного контура - синий размытый контур.
Timo Kähkönen

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

19

Вот совместные решения для устранения проблем со стилем в полях выбора 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;
    }
}

Есть ли способ по-прежнему определять цвет текста опции с помощью этого метода?
user1063287

На самом деле вы можете удалить стрелки Firefox, используемые в фоновом режиме SELECT, установив для свойства производителя -moz-appearanceзначение none.
Эмануэль Дель Гранде

В других ответах отсутствует важный select::-moz-focus-innerселектор, что делает их менее эффективными. Вот почему этот получает мою ⬆.
Дэйв Лэнд

select:-moz-focusringвместе с color: transparentи text-shadow: 0 0 0 #000удалена раздражающая граница в фокусе в Firefox v63
Джейсон Мур

Примечание: url-prefix (). fxsitecompat.dev/en-CA/docs/2018/… Читая ссылки, я не понимаю, собираются ли они постепенно отказываться от этого. Но имейте в виду.
user3342816

9

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

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

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


1
Это должен быть выбранный ответ
brandonscript

9

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

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

...


Спасибо, я думаю, мне нужно «сделать свой собственный» список выбора, чтобы добиться этого. Жаль, что элементы управления формой не являются более единообразными для разных браузеров.
Мартин

1
@Martin: это не что иное , по сравнению с негибкостью управления загрузкой файла, который не может быть стилизованной вообще в большинстве браузеров. ;)
Арсений Мурзенко

3

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

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


2
К сожалению, это решение не соответствует рекомендациям по доступности и удобству использования. Помимо интерфейсов TTS для слепых, он запрещает навигацию с клавиатуры. Сфокусированные элементы должны отличаться от других, проблема с текущим вопросом заключается в том, что Firefox не позволяет вам решить, как это сделать.
Эмануэль Дель Гранде

1

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

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

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

Ссылка


6
Спасибо за усилия, но, к сожалению, это не сработало. Может быть, это работает с aэлементом, но не работает с selectэлементом.
Мартин

1

Вот и решение

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

1
Проверено. Не работает. Firefox распознает это свойство, но ничего не делает. Пытался установить его, 10px solid redно не могу найти, где он отображается.
mpen

Это действительно сработало для меня, когда все другие ответы с более высокими оценками не были.
Tashows

0

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

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

*:focus{outline:none !important;}   



-4

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

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

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

if (FIREFOX) {
    //implement the code
}

Пожалуйста, объясните, что делает ваш фрагмент кода в дополнение к предоставлению фрагмента кода.
Sayan
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.