如何移除下拉选择框选中选项时的边框

你当前的CSS存在两处小问题需要先修正：

• CSS属性值不需要加引号，比如outline: "none"要改为outline: none，border-color: "white"改为border-color: white
• 数值和单位之间不能有空格，30 px要写成30px

要彻底移除下拉选项选中时的边框，需要针对不同浏览器的默认焦点样式做覆盖，给.selectbox补充以下完整样式：

.selectbox {
  min-height: 30px;
  max-height: 30px;
  border: 0;
  border-color: white;
  font-size: 16px;
  outline: none; /* 移除select本身的焦点边框 */
}

/* 清除Firefox中选项的默认焦点边框 */
.selectbox option::-moz-focus-inner {
  border: 0;
}

/* 移除选项选中时的焦点轮廓和阴影 */
.selectbox option:focus {
  outline: none;
  box-shadow: none;
}

如果还有个别浏览器存在焦点样式残留，可以再补充select:focus { box-shadow: none; }，确保select元素获得焦点时也不会出现额外的边框或阴影。

内容的提问来源于stack exchange，提问作者Christopher Townsend