如何删除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>