This is one of the simple css trick, If you apply the fontsize to the input field it also applied for the input placeholder text. So to avoid this you can use the below css code to set styles to the placeholder text only.
See the below demo i given font-size for the placeholder is 12px and the input text i given 20px , you can see it in the below example. I hope this will useful to you.
See the below demo i given font-size for the placeholder is 12px and the input text i given 20px , you can see it in the below example. I hope this will useful to you.
Code for change placeholder style not input values:
<html>
<head>
<title>How to change placeholder font-size not input value size</title>
<style>
::-webkit-input-placeholder { font-size: 12px; }
::-moz-placeholder { font-size: 12px; } /* firefox 19+ */
:-ms-input-placeholder { font-size: 12px; } /* ie */
input:-moz-placeholder { font-size: 12px; }
input
{
font-size:20px;
height:50px;
width:50%;
text-indent:10px;
}
</style>
</head>
<body>
<h1>How to change placeholder font-size not input value size</h1>
<input type="text" name="name" placeholder="Enter the name" />
<h2><a href="http://www.sanwebcorner.com/"> www.sanwebcorner.com</a><h2>
</body>
</html>
0 Comments