如何在选中选项后设置select标签（下拉列表）的样式？

CSS里确实没有专门对应「选中选项后」的伪类，得结合JS来实现，同时还能解决你说的选中后边框视觉变宽的问题——那其实是浏览器默认的焦点轮廓在搞鬼，处理掉就行。

直接上代码：

HTML #

<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

CSS #

/* 默认状态的边框样式 */
select {
  border: 1px solid #000;
  padding: 4px;
  /* 去掉浏览器自带的焦点轮廓，避免选中后看起来边框变宽 */
  outline: none;
}

/* 选中选项后的边框样式 */
select.selected {
  border: 1px solid #ff0000;
}

JavaScript #

const mySelect = document.getElementById('mySelect');

// 监听选项变更事件
mySelect.addEventListener('change', function() {
  this.classList.add('selected');
});

// 要是你想在下拉框失去焦点时恢复默认样式，就加这段：
// mySelect.addEventListener('blur', function() {
//   this.classList.remove('selected');
// });

原理很简单：用change事件捕捉用户选中新选项的动作，给select加上自定义样式类来切换边框颜色；去掉outline是为了消除浏览器默认的焦点高亮，解决你说的边框“翻倍”视觉问题。

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