2

我正在使用 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

4

1 回答 1

2

这里的问题是下拉列表的父级div.drop-select，有一个黑色的border。删除它，黑色边框将消失。

不要outline与border;混淆 在许多浏览器中，outline定义了发光，例如，文本输入字段获得焦点（当我在 Safari 中写这个答案时，文本框有一个蓝色的轮廓，有轻微的模糊）。边框是指类似于轮廓的东西，但通常用于表单元素以外的东西，并且通常存在于所有元素状态中，而不仅仅是focus.

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

于 2012-10-28T05:24:15.920 回答