CODEWITHSUNDEEP
cssformsplaceholder
avavav
avavav

Reputation: 13

Placeholder Text Not Fitting Input Area

I'm having a hard time finding help for this question, hope that asking is helpful for other beginners trying to figure this out.

My placeholder text isn't fitting in the input area. Padding doesn't seem to be doing the trick, either (I took out the padding I had in the code as it wasn't working).

html 

<form>
<input type="text" placeholder="email">
</form>

css

form {
margin:60px auto;
width:350px;
}

input[type='text'] {
width:300px;
height:40px;
}

::-webkit-input-placeholder {
font-family:Open Sans, sans-serif;
font-size:16px;
}

:-moz-placeholder { 
font-family:Open Sans, sans-serif;
font-size:18px;  
}

::-moz-placeholder { 
font-family:Open Sans, sans-serif;
font-size:18px;  
}

:-ms-input-placeholder {  
font-family:Open Sans, sans-serif;
font-size:18px; 
}

Upvotes: 1

Views: 4358

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

If you want the text that the user is inputting to be the same size as the placeholder, then add that size to the input

input[type='text'] {
    width:300px;
    height:40px;
    font-family:Open Sans, sans-serif;
    font-size:18px;
}

http://jsfiddle.net/eN2Nr/2/

Upvotes: 1

Related Questions