如何去除 css 中焦点上闪烁的光标？

Question

我正在处理一个 website，我想在其中删除焦点上闪烁的光标。

我用来制作输入搜索表单的 HTML 代码片段是：

HTML:

<div class="input-searchicon">
   <input class="form-control search_radius mb-4" type="text">
   <span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
<div class="input-searchradius">
   <input class="form-control search_radius mb-4" type="text" placeholder="search radius">
   <span class="fa fa-globe globe" aria-hidden="true "></span>
</div>

问题陈述：

我想知道我应该在上面的代码中进行哪些更改，以便焦点闪烁的光标不可见。我尝试使用以下代码，但它似乎不起作用。

input-searchicon:focus
{
outline:none;
}

Answer 1

您可以给 input 透明颜色和 text-shadow 来显示文本。

input{
 color: transparent;
 text-shadow: 0 0 0 #2196f3;
}

<div class="input-searchicon">
   <input class="form-control search_radius mb-4 input-searchicon" type="text">
   <span class="fa fa-search searchicon" aria-hidden="true "></span>
</div>
<div class="input-searchradius">
   <input class="form-control search_radius mb-4" type="text" placeholder="search radius">
   <span class="fa fa-globe globe" aria-hidden="true "></span>
</div>

如何去除 css 中焦点上闪烁的光标？

How to remove the blinking cursor on focus in css?

html

forms

focus

textfield

text-cursor