How to remove the blinking caret on focus in css?

I am working on a website in which I want to remove the blinking caret when a textbox gains focus.

The snippets of HTML codes which I have used in order to make the input search form are:

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>

Problem Statement:

I am wondering what changes I should make in the code above so that on focus blinking caret is not visible. I tried with the following code but it doesn't seem to work.

input-searchicon:focus
{
outline:none;
}

You can give the input a transparent color and a text-shadow to display the text.

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>