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

Question

我正在一个网站上工作，我想在其中删除焦点上的闪烁光标。

我用来制作输入搜索表单的 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

在 CSS 3 中，您可以使用插入符号颜色：

caret-color: transparent

Answer 2

你可以给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>