边框下拉列表

Question

我可以在下拉列表中以某种方式删除此虚线边框。每次我点击下拉列表，我都会得到这个虚线边框。示例在图像中。

编辑：

的CSS：

option {
    height: 20px;
    padding: 7px 0 5px 3px;
    outline: none;
    border: none;
}

html：

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                <option value="">Razvrsti restavracije po</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
            </select>

Answer 1

我认为有些人喜欢用键盘导航边框。所以删除它可能不是一个好主意。

Answer 2

我觉得CSS不可能。众所周知，虚线边框与文本颜色相同，因此如果您将文本颜色设置为与背景颜色相同，那么它将“消失”但您的文字也将如此：

也许你可以玩一些javascript：

onmouseover="this.style.color='#DFF1FA'" onmouseout="this.style.color='#000000'"

或者在你的onchange att上添加：this.blur()

<select onchange="window.open(this.options[this.selectedIndex].value,'_top'); this.blur()">
                <option value="" style="color:black">Razvrsti restavracije po</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
                <option value="#">Odrto test</option>
            </select>

有了它，选择一个选项后，虚线轮廓将消失。

你可以做更多......

JavaScript rulez！

Answer 3

您可以使用css outline属性禁用此类边框：

outline: none;