How to remove the blinking caret on focus in css? [duplicate]

Question

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;
}

Admissible

input:focus { outline: none; } try this – Mallarme

Answer 1

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>

Haik

It worked but i am wondering what is the purpose of using input-searchicon:focus { outline:none; } ? It is working by using input { color:transparent;} – Admissible

@user5447339 I just added some of your code and forgot to remove it. I have edited my answer. – Haik

Now if I select the dates from the website, it doesn't get selected. Is there any way we can fix that ? – Admissible

@user5447339 What dates? – Haik

@user5447339 Add text-shadow: 0 0 0 #2196f3. – Haik

Thanks, it worked. I am wondering what is the purpose of using three zeros before the number #2196f3 ? – Admissible

@user5447339 Read this on the text-shadow CSS property: w3schools.com/cssref/css3_pr_text-shadow.asp – Haik

The three zeroes were the h-shadow, v-shadow, and blur-radius values, respectively. – Haik

I have accepted your answer. I have one more quick regarding the website. After selecting the dates, its going all the way towards the left. Is there any way we can push towards the center ? – Admissible

@user5447339 You can use text-align: center. – Haik

yeah, I have to use text-align: center but where i have to use it ? – Admissible

@user5447339 Set that style on your input: <input style="text-align: center;"/>. – Haik

Answer 2

In CSS 3 you can use caret-color :

caret-color: transparent

Lindell