Styling text input caret

Question

I want to style the caret of a focused  lt input type  text   gt   Specifically  the color and thickness

User · Answer

Here are some vendors you might me looking for

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

You can also style different states, such as focus

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

You can also do certain transitions on it, like

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

User · Answer

Caret  is the word you are looking for  I do believe though  that it is part of the browsers design  and not within the grasp of css   However  here is an interesting write up on simulating a caret change using Javascript and CSS http   www dynamicdrive com forums showthread php t 17450 It seems a bit hacky to me  but probably the only way to accomplish the task  The main point of the article is      We will have a plain textarea somewhere in the screen out of the view   of the viewer and when the user clicks on our  fake terminal  we will   focus into the textarea and when the user starts typing we will simply   append the data typed into the textarea to our  terminal  and that s   that    HERE is a demo in action    2018 update  There is a new css property caret-color which applies to the caret of an input or contenteditable area  The support is growing but not 100   and this only affects color  not width or other types of appearance     x000D   x000D  input  x000D    caret-color  rgb 0  200  0   x000D    x000D   lt input type  text   gt  x000D   x000D   x000D

User · Answer

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet  I m not sure if It s possible to change the format with CSS  input  textarea       font-size  24px      padding  10px           color  red      text-shadow  0px 0px 0px  000      -webkit-text-fill-color  transparent     input  -webkit-input-placeholder  textarea  -webkit-input-placeholder       color      text-shadow  none      -webkit-text-fill-color  initial     Here is an example  http   jsfiddle net 8k1k0awb

User · Answer

It is enough to use color property alongside with -webkit-text-fill-color this way    x000D   x000D      input   x000D          color  red     color of caret    x000D          -webkit-text-fill-color  black     color of text    x000D        x000D   lt input type  text   gt  x000D   x000D   x000D    Works in WebKit browsers  but not in iOS Safari  where is still used system color for caret  and also in Firefox      The -webkit-text-fill-color CSS property specifies the fill color of   characters of text  If this property is not set  the value of the   color property is used  MDN   So this means we set text color with text-fill-color and caret color with standard color property  In unsupported browser  caret and text will have same color     color of the caret

User · Answer

In CSS3  there is now a native way to do this  without any of the hacks suggested in the existing answers  the caret-color property   There are a lot of things you can do to with the caret  as seen below  It can even be animated      Keyword value    caret-color  auto  color  transparent  color  currentColor       lt color gt  values    caret-color  red  caret-color   5729e9  caret-color  rgb 0  200  0   caret-color  hsla 228  4   24   0 8     The caret-color property is supported from Firefox 55  and Chrome 60  Support is also available in the Safari Technical Preview and in Opera  but not yet in Edge   You can view the current support tables here

[html] Styling text input caret

Examples related to html

Examples related to css

Examples related to input

Examples related to caret