How to remove the Blinker from input box in HTML

Question

I was wondering if there is a way to remove the blinker inside input. I have seen some websites without the blinker, But I could not find any code related to it.

Thanks in advance

Answer 1

Try this out

 .blinker { color: transparent; text-shadow: 0 0 0 gray; } 

 <input type="text" class="blinker"> 

Answer 2

You can use caret-color: transparent; - however, this doesn't have the best browser support.

 input { caret-color: transparent; } 

 <input type="text"> 

Answer 3

Try using this css:

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

   &:focus {
    outline: none;
   }
}

Answer 4

Check Lajos Meszaros's answer here https://stackoverflow.com/a/23472096/2929068 those seems like all options you can take to achieve same behavior you are looking for.

The basic idea is, that the cursor's color is the same as the text's color. So the first thing you do is make the text transparent, thus taking the cursor away with it. Then you can make the text visible again with a text shadow, Use this link to see it live in jsfiddle

 input[type="text"]{ color : transparent; text-shadow : 0 0 0 #000; } input[type="text"]:focus{ outline : none; } 

 <input type="text" value="test message" />