CODEWITHSUNDEEP
htmlcsscolorstext-cursor
eomeroff
eomeroff

Reputation: 9915

Input cursor color

How to change the color of content in HTML input type text while entering some value. And also the cursor color when it has focus.

Upvotes: 23

Views: 47896

Answers (3)

sealocal
sealocal

Reputation: 12397

Use color to specify the text color. Use caret-color to specify the caret's color.

HTML

<input class="examples" />
<textarea class="examples"></textarea>

CSS

.examples {
  color: gray;
  caret-color: red;
}

Upvotes: 34

Gibolt
Gibolt

Reputation: 47097

Use modern CSS!

input {
    caret-color : red;
}
input:focus {
    color : yellow;
}

Upvotes: 5

Pekka
Pekka

Reputation: 449395

Changing the colour when entering content is easy:

input:focus { color: yellow }

not supported by IE7 and lower. Compatibility table here.

Changing the cursor colour specifically is impossible as far as I know. It will usually take on the text content's colour which should be fine in most cases.

Upvotes: 28

Related Questions