What's the difference between placeholder text color/transparency and value in input?

Question

css

<input type='text' value='spider-man' placeholder='spider-man' />

Answer 1

Placeholder-a style can be changed using the following set of css rules:

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

Answer 2

Which one do you ask. And if you leave it blank, different browsers will do it differently.

Answer 3

I didn’t see the answer among the 2 proposed ones, I’ll try to answer as I understand it, the thing is that in firefox, by default, the transparency of the placeholder is 50% or .5, and for chrome it is 100% or 1, and so if you need to make the same transparency set for chrome and for ff 1 and the same value, or vice versa you need to do without transparency, sets 1 in 2 cases example:

::-moz-placeholder { opacity: .4; } // FF
::-webkit-input-placeholder { opacity: .4; } // Webkit

or sometimes according to the layout, the designer will draw a white color in the field, and you have it slightly gray, then you need to do this:

::-moz-placeholder { opacity: 1; } // FF
::-webkit-input-placeholder { opacity: 1; } // Webkit

Hope it answers your question