Как удалить пунктирные линии в выпадающем меню SELECT/OPTION в Firefox?
В Chrome и других браузерах мое раскрывающееся меню выглядит отлично:
![enter image description here]()
Однако в Firefox у него есть нежелательные строки пунктирные:
![enter image description here]()
Я успешно удалил ненужные штрихованные строки Firefox для кнопок и ввода с помощью этих инструкций CSS:
button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }
поэтому я думал, что они будут работать для элементов select/option, но они этого не делают:
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; }
Ответы
Ответ 1
Ответ James Broad почти идеально подходит, но текст "только для тени" для элементов опций выглядит уродливым. Это то, что отлично работает для меня:
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;
}
Ответ 2
Здесь комбинированный взлом для этого:
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
решение, найденное на fooobar.com/questions/78086/..., кажется, работает отлично.
Короче:
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Где # 000 - ваш цвет текста.
Ответ 4
попробуйте использовать outline: 0,
работает для кнопок