4

first thanks to you.

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 alreay try the function on the 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

Community
  • 1
  • 1
zctocm
  • 91
  • 1
  • 9

2 Answers2

7

Use modern CSS!

input {
    caret-color : #FF0000;
}
Gibolt
  • 42,564
  • 15
  • 187
  • 127
-2

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

div {
   cursor: url(YOUR_IMAGE_URL), auto;
}
Pooya
  • 12
  • 1
  • if I assign an image has the fixed width and height,when I change the input height,the cursor image height will fit for the input node height? – zctocm Sep 29 '16 at 10:16
  • 3
    `cursor` is for the **mouse pointer**, if I understand you correctly, you are looking for the **caret** ([The blink line](http://i.stack.imgur.com/lPX6Z.jpg)) color. – Mosh Feu Sep 29 '16 at 10:28
  • yeah,the caret color – zctocm Sep 29 '16 at 10:36