css - 下拉选择大纲 - 无法删除 :(

Question

我使用的是 Firefox，但似乎无法去掉所选选项周围的轮廓。

我的代码

HTML

        <div class="drop-select">
             <select name="date" id="date">
               <option value="01">01</option>
               <option value="02">02</option>
            </select>
        </div>

非常简单。

CSS

.drop-select {
    display: block;
    border: 1px solid #000;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font: 12px/14px arial, helvetica, verdana, sans-serif;
    width: 80px;
    height:25px;
    -webkit-appearance: none;
    overflow: hidden;
    background: url('http://www.adcentre.com.au/media/1326/bg-down-arrow.gif')no-repeat right #fff;
   float: left;
   margin-right: 5px;
   margin-top: 6px;
   margin-bottom: 6px;
}

.drop-select select {
   background: transparent;
   width: 125px;
   height: 25px;
   border: none;
   padding: 5px 0 0 5px;
   color: #000;
   outline:0;
}

即使我将轮廓设置为 0，边框设置为无，它仍然会显示它吗？

JSFiddle 中的示例:

http://bit.ly/SpQGC4

Answer 1

这里的问题是下拉菜单的父级 div.drop-select 有一个黑色的边框。删除它，黑色边框就会消失。

不要将outline与border混淆；在许多浏览器中，outline 定义了文本输入字段获得焦点的发光效果(当我在 Safari 中写下这个答案时，文本框有一个带有轻微模糊的蓝色轮廓)。边框指的是非常类似于轮廓的东西，但通常用于表单元素以外的事物，并且通常出现在所有元素状态中，而不仅仅是焦点。

还值得一提的是，在 Windows 和 Mac OS(不确定 Linux 发行版)上的某些浏览器中，表单元素的轮廓可以设置样式。