CSS to modify an input box

Question

I've created an image of the result I want for a couple of input fields.

What I've tried to get that result is this:

input {
  padding-left: 2px;
  padding-top: 2px;
  height: 1.8em;
  font-size: 1em;
}

The problem I'm having in creating this is any time I resize the text so it is relatively smaller than the input field, the height of the input field changes accordingly as well, it doesn't appear to be paying any attention to the height attribute, only font-size.

I want the text to end up at about 60% the height of the input field, and as above, quite close in to the bottom left corner.

Can someone point me in the right direction for this?

Add padding-top:5px; or similar until you get what you need. — scunliffe
– scunliffe, Commented Oct 6, 2012 at 2:50

Tieson T. · Accepted Answer · 2012-10-06 02:59:21Z

2

em is based off the size of the font (the point size), so if you change the font-size, the height (as you have specified it) will change. Use pixel height if you want it independent of font-size.

answered Oct 6, 2012 at 2:59

Tieson T.

21.2k6 gold badges83 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

CSS to modify an input box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related