无法突出显示焦点下拉

Question

我正在尝试在页面加载时突出显示带有 select 标记的下拉菜单。我在 select 标签中有多个类我尝试对所有标签应用焦点，但没有成功。有人可以看看吗？

div.cs-select select:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

<div id="originalAmount_@differAmountId" class="divoriginalAmount">

  <select class="cs-select cs-skin-border billAccountAmount " data-label="@StringResource.Lbl_Pay " id="@Html.IdFor(m => Model.AmountOptionList)">

Answer 1

这与 javascript 有关。

document.getElementById("AmountOptionList").focus();

div.cs-select select:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

<div id="originalAmount_@differAmountId" class="divoriginalAmount">

  <select class="cs-select cs-skin-border billAccountAmount " data-label="@StringResource.Lbl_Pay " id="AmountOptionList">
    <option>Options</option>
  </select>

</div>

无法突出显示焦点下拉

not able to get highlighted drop down with focus

css

select

focus

autofocus

bootstrap-4