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有一个黑色的border。删除它，黑色边框将消失。

不要将outline与border混淆;在许多浏览器中，outline定义了发光，例如，文本输入字段聚焦（当我在Safari中编写此答案时，文本框的蓝色轮廓略有模糊）。 Border指的是类似于大纲的东西，但通常用于其他而不是表单元素，并且通常出现在所有元素状态中，而不仅仅是focus。

值得一提的是，在某些浏览器中，无论是在Windows和Mac OS上（不确定Linux发行版），表单元素的大纲都可以进行样式化。

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

1 个答案: