Как я могу удалить пунктирные линии в выпадающем списке SELECT / OPTION в Firefox? - PullRequest
23 голосов
/ 06 февраля 2011

В Chrome и других браузерах мой раскрывающийся список выглядит отлично :

enter image description here

Однако в Firefox есть нежелательные пунктирные строки:

enter image description here

Я успешно удалил нежелательные пунктирные линии Firefox для кнопок и input элементов с этими операторами CSS:

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

поэтому я подумал, что они будут работать для элементов выбора / опции, но они не работают:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

Как удалить пунктирные линии в этом раскрывающемся списке, чтобы он выглядел как в Chrome и других браузерах?

Добавление

Они тоже не работают:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

ни эти:

select { outline: 0; }
option { outline: 0; }

ни эти:

select { outline: none; }
option { outline: none; }

Ответы [ 4 ]

8 голосов
/ 16 декабря 2014

Ответ Джеймса Брода почти идеален, но текст «только тени» для элементов опций выглядит некрасиво. Это то, что идеально подходит для меня:

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
  color:#000; /* your normal text color here */
  text-shadow:none;
}
4 голосов
/ 06 февраля 2011

Вот комбинированный хак для этого:

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

Затем добавьте ввод с tabindex = 0 после каждого выбора И немного кода для фокуса "делегирование":

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});
3 голосов
/ 24 июня 2014

решение, найденное на https://stackoverflow.com/a/18853002/728855, кажется, работает идеально.

Короче:

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

Где # 000 - ваш цвет текста.

0 голосов
/ 06 февраля 2011

попробуйте использовать outline: 0, работает для кнопок

...