How to change placeholder's font-size but don't change the value's font-size in <input> by CSS?

Question

How to change placeholder's font-size but don't change the value's font-size in <input> by CSS ?

When I focus on the <input> , placeholder's font size is already 12px, and then the value I input will be 16px. Just like this.

When I focus on the <input>

When I edit

Answer 1

Check this answer:

 ::-webkit-input-placeholder { font-size: 16px; } ::-moz-placeholder { font-size: 16px; } /* firefox 19+ */ :-ms-input-placeholder { font-size: 16px; } /* ie */ input:-moz-placeholder { font-size: 16px; } input { font-size:8px; height:30px; width:50%; text-indent:10px; }

 <input type="text" name="name" placeholder="Enter the name" />

Answer 2

You can try,

.your-class::-webkit-input-placeholder, .your-class::-moz-placeholder, .your-class:-ms-input-placeholder, .your-class:-moz-placeholder{
   font-size: 16px;
 }

or '*' for all placeholders.

Answer 3

From here

::-webkit-input-placeholder { font-size: 16px; }
::-moz-placeholder { font-size: 16px; } /* firefox 19+ */
:-ms-input-placeholder { font-size: 16px; } /* ie */
input:-moz-placeholder { font-size: 16px; }