javascript - 下拉菜单打开而不是聚焦时的目标选择(CSS 或 jQuery)

Question

我有什么:

带边框的选择元素。当下拉菜单打开(即聚焦)时，故意移除底部边框以实现此外观:

...而不是这个样子:

两者的区别在于选择元素和下拉列表之间是一个 1px 边框而不是两个 1px 边框。

我需要什么:

我需要防止在选择元素被选中时底部边框被移除(即聚焦但下拉列表未打开)。

目前，我的结果在使用 tab 键时意外地删除了底部边框:

我的代码:

label,
select {
  font-size: 12px;
  font-family: sans-serif;
}

select {
  border: 1px solid #666;
  padding: 5px;
  border-radius: 0;
  color: #666;
  height: 34px;
  margin: 0;
  width: 200px;
}

select:focus {
  outline: none;
  color: #111;
  border: 1px solid #0073aa;
  background-color: rgba(0, 115, 170, 0.2);
  border-bottom: none;
}

select option {
  color: #111;
  background-color: #e8e8e8;
}

<label>Fruit:</label>
<select>
  <option value="" selected></option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="banana">Banana</option>
  <option value="plum">Plum</option>
  <option value="pineapple">Pineapple</option>
</select>

注意事项:

我不想替换选择元素(例如 jQuery UI)。我愿意使用 jQuery 来定位或设置选择元素的样式。

Answer 1

您还需要将 select:focus 选择器中的样式应用于 select:active，但将底部边框的行为引入 : active 和 :focus 伪选择器分开:

select:active, select:focus {
  outline: none;
  color: #111;
  border: 1px solid #0073aa;
  background-color: rgba(0, 115, 170, 0.2);
}

select:active {
  border-bottom: none;
}

select:focus {
  border-bottom: 1px solid #0073aa;
}

这样，当您在下拉菜单上切换或单击时，将应用样式，而不是底部边框样式。由于单击会使元素处于事件状态但 Tab 键不会，因此我们需要确保在仅关注 select 时显示底部边框。