input text styling of input field html css

Question

I've got an input field with one line on the bottom, much like a line of a textbook. I want to be able to display the placeholder text as well as the text the user inputs just a little above the line.

I've made a fiddle over here: http://jsfiddle.net/H7AVP/

This is what my HTML looks like:

<input type="text" placeholder="subscribe for early access" class="form-control email">

And my CSS (not cross-browser optimized for the question):

.email::-webkit-input-placeholder { 
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  padding-bottom:45px;
  margin-top:-10px;
}

input {
  background-color: #2980b9;
  outline: 0;
  border-bottom: 2px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom-style: double;
  border-bottom-color: #34495e;
  height: 46px;
  width: 300px;
}

input:focus{
  outline:0;
}
textarea:focus{
  outline:0;
}

so you want the text to appear closer to the line? like this: jsfiddle.net/H7AVP/1 ? — Nico O
– Nico O, Commented Mar 5, 2014 at 12:00
stackoverflow.com/questions/19516303/… see this for information. — Kawinesh S K
– Kawinesh S K, Commented Mar 5, 2014 at 12:06

patrickj · Accepted Answer · 2014-03-05 12:05:07Z

1

Easiest way that comes to my mind would be setting line-height on input to about 40px. As it has a fixed height, this will work just fine to move the text to the bottom.

answered Mar 5, 2014 at 12:05

patrickj

731 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anusha kurra · Accepted Answer · 2014-03-05 12:08:51Z

0

According to my understanding you want your placeholder and input to be in center.

add the following

.email{
    padding-bottom:10px;
}

and in form > div > input css file add {height :30px;}

here is the http://jsfiddle.net/H7AVP/

answered Mar 5, 2014 at 12:08

Anusha kurra

4803 silver badges9 bronze badges

Comments

Oce · Accepted Answer · 2014-03-05 12:32:01Z

Here are two variations:

1: http://jsfiddle.net/H7AVP/5/

By default, removing any specific height or padding will keep the text "snug" with it's surrounding border. From there, just add padding to the left/right + padding to the top. I believe this should give you the effect you want.

After that, just move the styles you are using for -webkit-input-placeholder in the generic input itself. Then, if you just want to differentiate on color, then add it specifically to -webkit-input-placeholder.

Also, updated to use shorthand CSS methods wherever possible.

2: http://jsfiddle.net/H7AVP/6/

Now, if you want your text to get friendlier with the bottom border, then just simply apply a set height to the input element. The top padding will make sure your text is "snug" to the bottom.

Collectives™ on Stack Overflow

input text styling of input field html css

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related