html-无法从Firefox选择下拉菜单中删除轮廓/虚线边框

这个问题已经在这里有了答案:

  • 从FF的选择框中删除轮廓                                     11个答案

我的样式向下,但是在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。

shrewdbeans asked 2020-01-13T12:15:40Z
2个解决方案
138 votes

在这里找到我的答案:[https://stackoverflow.com/a/18853002/1261316]

它没有被设置为正确的答案,但对我来说却非常有效:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}
select {
    background: transparent;
}
shrewdbeans answered 2020-01-13T12:16:06Z
0 votes

这将为您提供帮助。 将其放在样式表顶部。

/**
* 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;
}
Migol answered 2020-01-13T12:16:25Z
translate from https://stackoverflow.com:/questions/19451183/cannot-remove-outline-dotted-border-from-firefox-select-drop-down