javascript - 打开下拉列表而不是集中进行目标选择(CSS或jQuery)

我有的：

带边框的选择元素。当下拉列表处于打开状态（即已聚焦）时，会故意删除底部边框以实现以下效果：



...而不是这样的样子：



区别在于两者是一个1px边框，而不是select元素和下拉菜单之间的两个1px边框。

我需要的：

我需要防止在选择元素进入选项卡时（即集中但下拉菜单未打开）移除底部边框。

当前，我的结果在制表符时不希望移除底部边框：



我的代码：

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>

注意：

我不想替换select元素（例如jQuery UI）。
我愿意使用jQuery来定位或设置select元素的样式。

最佳答案

您还需要将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;
}

这样，当您选中或单击下拉列表时，将应用样式，但不包括底部边框样式。由于单击使该元素处于活动状态，而使制表不起作用，因此当我们仅将焦点放在select时，我们需要确保显示底部边框。