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

标签 html css forms

<分区>

我有一个 down 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 .

最佳答案

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

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

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

关于html - 无法从 Firefox 选择下拉列表中删除轮廓/虚线边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19451183/

相关文章:

javascript - 脚本在 JSFiddle 上运行良好,但在其他地方运行失败

python - 如何在 Emacs 中设置定界符内的语法颜色?

javascript - 使输入文本字段可变和可选择(用复选框切换)

html - 在圆圈内垂直和水平居中文本字符 ☢ (CSS)

html - 如何使输入的 react 方式与 flexbox 中的父 div 相同?

html - 3个div覆盖整个窗口

css - 将 li 内的 float div 设置为 100% 高度

css - recaptcha 2 宽度 css float 不起作用

Delphi - 在另一个表单后面创建表单

php - 从网站上传后,文件可以在 FTP 中打开,但不能在 HTTP 中打开