禁用非输入元素的插入符号？

Question

是否可以禁用 HTML 文档中非输入元素的闪烁插入符号？

例如，单击列表项会将插入符号移动到列表项元素：

<ul>
  <li>Cool choice 1</li>
  <li>Cool choice 2</li>
  <li>Cool choice 3</li>
</ul>

如果您有一个用于导航的

ul

，那么您可能希望它们感觉像按钮。如果脱字符号没有发挥作用，则可以实现此目的。这样的事可能吗？

Answer 1

试试这门课

.disableCaret{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
   user-select: none;       
}

Answer 2

您可以在 css 顶部执行类似的操作。这针对不是输入的每个元素并将光标设置为默认箭头。

CSS

*:not(input) {
    cursor: default;
}

然后，对于任何您想要显示为可点击的内容，您只需添加这样的类即可。

CSS

.clickable {
    cursor: pointer;
}

Answer 3

我猜你正在使用带有选项的 Firefox

accessibility.browsewithcaret

设置为 true。该选项可以在 about:config 中找到，也可以在名为

Always use the cursor keys to navigate within pages

的高级设置中的第一个选项中找到。 如果我猜对了，这个问题与 html 和 css 无关。

Answer 4

隐藏和禁用用于选择或下拉菜单的胡萝卜图标。

CSS

.form-select.disableCaret {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  cursor: pointer;
}

.form-select.disableCaret::-ms-expand {
  display: none;
}

HTML

 <select class="form-select disableCaret" id="diabeticYesNo" name="diabeticYesNo"
 aria-label="Floating label select example" required disabled>
    <option value="" {% if myForm.diabeticYesNo == 'NA' %}selected{% endif %} hidden>Select</option>
    <option value="Diabetic" {% if myForm.diabeticYesNo == 'Diabetic' %}selected{% endif %}>DM</option>
    <option value="Prediabetic" {% if myForm.diabeticYesNo == 'Prediabetic' %}selected{% endif %}>PD</option>
    <option value="NonDiabetic" {% if myForm.diabeticYesNo == 'NonDiabetic' %}selected{% endif %}>ND</option>
</select>