如何去除select标签选项的异常白色边框？

我的select标签选项周围出现了奇怪的白色边框，想把它去掉。试过设置outline:0;但没用，本来以为这个属性能解决。

HTML代码： #

<select name="filtro" id="status">
   <option value="encerrado">Encerrado</option>
   <option value="pendente">Pendente</option>
</select>

CSS代码： #

#status{
    background-color: transparent;
    padding: 0.5em;
    border: 1px solid var(--blue);
    border-radius: 3px;
    transition: 0.5s;
}
#status option{
    background-color: var(--body-color);
    color: var(--blue);
}
#status:hover{
    cursor: pointer;
    padding: 0.65em;
}

解决方法 #

这个白色边框是浏览器给option元素加的默认选中高亮样式，或是select下拉容器的默认样式，试试以下CSS调整：

1. 给select去掉浏览器默认外观，避免自带装饰干扰：

#status{
    background-color: transparent;
    padding: 0.5em;
    border: 1px solid var(--blue);
    border-radius: 3px;
    transition: 0.5s;
    /* 新增：移除浏览器默认下拉框样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

2. 覆盖option选中、悬停时的默认高亮样式：

#status option:checked,
#status option:hover {
    /* 用自定义颜色替换默认白色高亮 */
    background-color: var(--blue) !important;
    color: var(--body-color) !important;
    /* 强制去掉边框 */
    border: none;
}

3. 明确指定select聚焦状态的样式，彻底消除默认轮廓：

#status:focus{
    outline: none;
    /* 可选：替换为自定义聚焦样式，比如加深边框色 */
    border-color: #0056b3;
}

不同浏览器对select/option的默认样式差异大，以上代码能覆盖Chrome、Firefox等主流浏览器的默认样式，解决白色边框问题。

内容的提问来源于stack exchange，提问作者Guilherme Alto