CODEWITHSUNDEEP
htmlcssinput
zctocm
zctocm

Reputation: 91

How can I change the input cursor/caret color?

I want to achieve such features:（for the <input> node）

  1. the color of placeholder text is: #b8b9b9

  2. the color of the text you input is: #4e5050

  3. the color of the input caret is: #FF0000

I have already achieved the first two feature 1 and 2,the code is:

input[type='text']::-webkit-input-placeholder{
  color: #b8b9b9;
}
input[type='text']:-moz-placeholder{
  color: #b8b9b9;
}
input[type='text']::-moz-placeholder{
  color: #b8b9b9;
}
input[type='text']:-ms-input-placeholder{
  color: #b8b9b9;
}
input[type='text']:focus {
  color: #4e5050;
}

But I do not know how to achieve the feature-3.

I have already tried the function at Styling text input caret, but this doesn't work for the mobile safari browser. The mobile safari input caret color is already the default color of the iphone:blue

Upvotes: 4

Views: 4597

Answers (3)

bhautik
bhautik

Reputation: 7

Declaring caret-color latest in 2024 like this

for normal declaration

input{
   caret-color: #ffffff;
}

declaring in -webkit

input::-webkit-input-placeholder {
    color: red; 
}

for input-placeholder in webkit

input::-webkit-input-placeholder {
    caret-color: red; 
}

for normal input-placeholder

input::placeholder {
    caret-color: green; 
}

Upvotes: 0

Gibolt
Gibolt

Reputation: 47097

Use modern CSS!

input {
    caret-color : #FF0000;
}

Upvotes: 7

Pooya
Pooya

Reputation: 12

you can assign an image to any element for cursor by this option

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}

Upvotes: -2

Related Questions