Placeholder design

Placeholder design
0

#1

Hello,

I’m at 2nd front end development project and i dont know how to change the font-size and font-family of my Placeholder in a input box.

Can someone help me?


#2

Can you link to your codepen?


#3

Make sure the input and the placeholder have the same font-family and font-size.

Example:
HTML

<input type="text" placeholder="Enter your value here">

CSS

input {
    font-family: Courier;
    font-size: 20px;
}

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    font-family: Courier;
    font-size: 20px;
}

/* Firefox 4-18 */
:-moz-placeholder, ::-moz-placeholder {
    font-family: Courier;
    font-size: 20px;
}

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    font-family: Courier;
    font-size: 20px;
}
/* Firefox 4-18 */
:-moz-placeholder  {
    font-family: Courier;
    font-size: 20px;
}

/* Firefox 19-50 */
::-moz-placeholder {
    font-family: Courier;
    font-size: 20px;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    font-family: Courier !important;
    font-size: 20px !important;
}

#4

Here is my pen: https://codepen.io/GPorto/pen/NyMxbQ

I solved my problem when i changed my input font-size

#contato input { margin-top: 30px;
width: 100%;
height: 50px;
font-size: 30px;
background-color: white;}

But in the Msg input box, the text “Digite sua mensagem” is at input box middle, how can i move it to the top?

Thank you for the answer about the size


#5

My suggestion is to change the message input to a textarea element like:

<div id="mensagem1"> 
  <textarea id="Mensagem" placeholder="Digite sua mensagem"></textarea>
</div>

Then, in your CSS, change the following:

#contato input {
 margin-top: 20px;
 width: 100%;
 height: 35px;
 font-size: 25px;
 background-color: white;
}

to

#contato input, #Mensagem {
  margin-top: 30px;
  width: 100%;
  height: 50px;
  font-size: 30px;
  background-color: white;
}

and change the following:

#contato #mensagem1 input {
  height: 200px;
}

to

#Mensagem {
  height: 200px;
}