Question

我选择了一个选项：

<select  style="display: inline-block;" class="shs-select form-select  shs-select-level-1" size="10"  id="edit-shs-term-node-tid-depth-select-1">
<option value="0">- None -</option>
<option value="87">a</option>
<option value="88">b</option>
<option value="89">c</option>
<option value="95">d</option>
<option value="90">e</option>
</select>

我可以远程选择一个选项的蓝色突出显示吗？

感谢您的回答。

Answer 1

Chrome等浏览器默认使用outline。您可以通过删除它来禁用它。

select {
    outline: none;
}

.no-outline {
    outline: none;
}

<div>
    <strong> Outline </strong>
    
    <select>
        <option> A </option>
        <option> B </option>
        <option> C </option>
    </select>    
</div>

<div>
    <strong> No Outline </strong>

    <select class="no-outline">
        <option> A </option>
        <option> B </option>
        <option> C </option>
    </select>
</div>

如果您在选择打开时引用实际选项显示，如评论中所述，则目前无法实现。

这是特定于浏览器的，但在大多数情况下，选择输入的组合框显示实际上是用本机OS控件表示的，因此大多数应用于option的CSS样式都会被忽略。

解决此问题的方法是使用第三方库来模拟使用HTML / CSS的组合框。这通常是不鼓励的，因为在大多数情况下，本机选择实现在UX方面会表现得更好。

删除选项的蓝色突出显示

1 个答案: