Не удается удалить контур/пунктирную границу из Firefox, выберите drop down
У меня стилизовано вниз, но я не могу удалить пунктирную рамку, когда она нажата в Firefox. Я использовал outline: none
, но он все еще не работает. Любые идеи?
CSS
.styled-select {
background: lightblue;
font-size: 20px;
height: 50px;
line-height: 50px;
position: relative;
border: 0 none !important;
outline: 1px none !important;
}
.styled-select select {
background: transparent;
border: 0;
border-radius: 0;
height: 50px;
line-height: 50px;
padding-top: 0; padding-bottom: 0;
width: 100%;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
border: 0 none !important;
outline: 1px none !important;
}
HTML:
<div class="styled-select">
<select id="select">
<option value="0">Option one</option>
<option value="1">Another option</option>
<option value="2">Select this</option>
<option value="3">Something good</option>
<option value="4">Something bad</option>
</select>
</div>
Пожалуйста, смотрите jsFiddle.
Ответы
Ответ 1
Нашел мой ответ здесь: fooobar.com/questions/78086/...
Он не был задан как правильный ответ, но он отлично сработал для меня:
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
select {
background: transparent;
}
Ответ 2
Это поможет вам. Поместите его поверх таблицы стилей.
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline:0;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
Ответ 3
Это работает на Firefox 42.0:
a:link {
outline: 0;
}