如何为下拉菜单Option添加hover蓝色矩形样式？

原生<option>元素的样式渲染受浏览器限制，无法直接在内部嵌套<div>这类元素，但可以通过CSS技巧模拟实现悬停时的蓝色矩形效果，以下是两种可行方案：

方案1：伪元素模拟蓝色方块 #

通过::before伪元素在选项文字前生成蓝色矩形，仅在悬停时显示：

/* 为select设置相对定位，作为伪元素的定位基准 */
#drpTermList {
  position: relative;
}

/* 悬停时在选项前插入蓝色方块 */
#drpTermList option:hover::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #007bff;
  margin-right: 8px;
}

注意：部分浏览器（如Firefox）对<option>伪元素的支持有限，若需要更广泛的兼容性，可尝试方案2。

方案2：背景渐变模拟左侧矩形 #

如果只需悬停时选项左侧显示蓝色竖条，可用线性渐变背景配合内边距实现：

#drpTermList option:hover {
  /* 左侧12px宽度的蓝色矩形，右侧为透明背景 */
  background: linear-gradient(to right, #007bff 12px, transparent 12px);
  /* 预留空间避免文字覆盖矩形 */
  padding-left: 18px;
}

补充提示 #

若原生<select>的样式限制仍无法满足需求，建议使用基于<div>模拟的自定义下拉组件，这类组件不受原生控件的样式约束，能更灵活实现复杂交互效果。

内容的提问来源于stack exchange，提问作者It's Just a Printer Driver