I want to style the caret of a focused <input type='text'/>
. Specifically, the color and thickness.
8 Answers
'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.
input{
caret-color: rgb(0, 200, 0);
}
<input type="text"/>
-
1
-
is there any way to set a custom cursor on
input
elements or is the only solution a hackish workaround?– oldboyOct 14, 2020 at 8:47 -
2There is also
caret-shape
(where we can setauto | bar | block | underscore
) and the shorthandcaret
. Too bad that they are currently supported by no one (no even on Can I use at the time this is written)– BarryCapJul 16, 2021 at 15:46
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/
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;
/* <color> 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.
-
1Beat me to the punch. Of course, this property will only work in Firefox, at least for now, and doesn't release until April 2017. See this page. Feb 25, 2017 at 22:23
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;}
-
6This is useful for styling the placholder text, however it doesn't style the blinking caret the OP referenced.– craigApr 3, 2017 at 13:30
It is enough to use color property alongside with -webkit-text-fill-color this way:
input {
color: red; /* color of caret */
-webkit-text-fill-color: black; /* color of text */
}
<input type="text"/>
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.
it is simple. Just add the caret-color attribute like this:
* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;}
input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);">
<br>
<textarea style="caret-color: blue;"></textarea>
<br>
<div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>
While I was trying to build a terminal like website i got to know that there is no way (yet) to change the style of the cursor using CSS.
But you can change the caret-color as shown in the other answer.
Then, after almost 3 days of research I got an Idea from inspecting a website (sorry, I can't provide the link)
It adds and removes a HTML span element in the command string
and makes a block cursor but you can make any caret if you know the caret's position with a little bit of CSS.
I don't recommend this for a production application.
This helped me create a caret like you see in my site
You can see the source in this repo
Summary:
suppose your text is echo Hello
with caret after H
.
Then the code might be something like
<div>
<span>
echo H
</span>
<span class="animate-blink" > <!-- This span will act as your caret -->
e
</span>
<span>
llo
</span>
</div>
Hope it helps ;-)
<input type="text"/>
i guess