CODEWITHSUNDEEP
htmlcss
HappyToKnow
HappyToKnow

Reputation: 33

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

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>

enter image description here

When I edit

enter image description here

Upvotes: 3

Views: 4942

Answers (3)

sansan
sansan

Reputation: 833

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" />

Upvotes: 3

Carl Binalla
Carl Binalla

Reputation: 5401

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; }

Upvotes: 0

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

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.

Upvotes: 0

Related Questions