如何让select元素选中选项后保留:focus伪类的底部边框样式？

方法一：纯CSS（利用:valid伪类） #

这种方法依赖HTML的required属性和空值默认选项，适合需要强制用户选择的场景。

步骤： #

1. 修改HTML结构，给select添加required属性，默认选项设为空值：

<select required>
  <option value="">请选择选项</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

2. 编写CSS样式：

/* 默认样式 */
select {
  width: 200px;
  padding: 8px;
  border: none;
  border-bottom: 2px solid #ccc;
  background-color: transparent;
  outline: none;
  font-size: 16px;
}

/* 聚焦时的样式 */
select:focus {
  border-bottom-color: #2196F3;
}

/* 选中有效选项后保持样式 */
select:valid {
  border-bottom-color: #2196F3;
}

原理：当用户选中非空值的选项后，select会触发:valid状态，将:valid的样式设置为与:focus一致，即可实现选中后保持边框变色的效果。

方法二：JavaScript辅助（更灵活的场景） #

如果不需要强制用户选择（不想用required），或者默认选项本身有值，可以用JS监听选择事件来动态控制样式。

步骤： #

1. HTML结构：

<select class="custom-select">
  <option value="0">请选择选项</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

2. CSS样式：

/* 默认样式 */
.custom-select {
  width: 200px;
  padding: 8px;
  border: none;
  border-bottom: 2px solid #ccc;
  background-color: transparent;
  outline: none;
  font-size: 16px;
}

/* 聚焦和选中后的样式 */
.custom-select:focus,
.custom-select.selected {
  border-bottom-color: #2196F3;
}

3. JavaScript代码：

const select = document.querySelector('.custom-select');

// 监听选择变化事件
select.addEventListener('change', function() {
  // 选中有效选项时添加样式类，否则移除
  this.classList.toggle('selected', this.value !== '0');
});

原理：通过change事件判断用户是否选中有效选项，动态添加/移除selected类，让选中后的样式与聚焦时保持一致。

注意事项： #

• 部分浏览器对select的原生样式定制有局限，但边框样式属于通用支持范畴。
• 若要隐藏原生下拉箭头，可添加appearance: none; -webkit-appearance: none;来自定义箭头样式。

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