怎么去掉聚焦文字处的光标竖线？

Question

发现项目中有个现象，所有的文字点击后都会出现一条类似贯标的竖线，但是不会闪烁，如下图这种：

开始我以为是某个地方写的全局配置，但这个类似超链接的切换按钮有这个效果明显是不合适的，于是我在css 中添加了如下配置：

从控制台看，样式选择器是没问题的样式也生效了，

但竖线并没有去掉，而且我发现在控制台中强制设置元素状态是不会出现这道竖线的，倒是上面有一个模拟已聚焦的网页可以出现这个竖线：

所以，这道竖线到底是什么？哪里来的，应该怎么去掉？

Answer 1

大概率是以下两种情况：

1>文本选择: 默认情况下，网页上的文本是可以被选择的。当你点击文本时，浏览器会显示光标（通常是一个垂直的闪烁光标），表示你可以开始选择文本或输入内容。这是因为文本节点的默认行为就是允许用户选择和复制文本。

2>可编辑区域: 如果某个文本是放在一个可编辑的区域（例如 <input> 元素、<textarea> 元素或者带有 contenteditable 属性的元素），点击该区域时，光标会显示在输入框中，表示可以输入文本。

第1种情况解决办法：
要禁用文本选择，可以使用 CSS 的 user-select 属性。不同的浏览器可能会有不同的前缀，因此可以分别指定多个属性值。以下是具体的实现方法：

/* 禁用文本选择 */
.noselect {
    user-select: none; /* 标准属性 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}

然后，你可以将这个类应用到你不希望用户选择的文本的元素上。例如：

<div class="noselect">
    这段文本不能被选中。
</div>

第2种情况解决办法：
如果你使用的是输入框、文本框或可编辑区域，并希望禁用其可编辑性，可以使用以下几种方法：
a. 对于 <input> 和 <textarea>
可以将它们设为 readonly 或 disabled：

<input type="text" value="这是只读的" readonly />
<textarea readonly>这个文本框也是只读的</textarea>

b. 对于 contenteditable
如果你有一个可编辑的元素（例如 <div contenteditable="true">），可以将其 contenteditable 属性设为 false：

<div contenteditable="false">
    这段文本不能被编辑。
</div>

Answer 2

试试关闭光标浏览模式，

Answer 3

换个浏览器。用火狐试下。