CODEWITHSUNDEEP
htmlcss
willdanceforfun
willdanceforfun

Reputation: 11240

How can I control the height of text inputs and submit input buttons in different browsers?

I have a very little but hard (for me) problem to solve.

I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.

HTML

<input type="text" name="email" /><input type="submit" value="»" />

CSS

input[type=text] {
    width: 218px;
}

input[type=submit] {
    background: #000;
    color: #fff;
}

input[type=submit], input[type=text] {
    padding: 9px;
    font-size: 18px;
    line-height: 18px;
    float: left;
    border: 0;
    display: block;
    margin: 0;
}

I've setup this basic code on a jsfiddle here.

You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.

What am I missing?

Upvotes: 23

Views: 90775

Answers (8)

fred727
fred727

Reputation: 2819

Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...

The best solution I found is to put a div arround and set its style to display: flex.

All is perfect this way.





    body {
        background: #ccc;
    }
    div{
        display: flex;
    }
    input[type=text] {
      width: 218px;
    }
    input[type=submit] {
      background: #000;
      color: #fff;
    }
    input[type=submit], input[type=text] {
      padding: 5px;
      font-size: 25px;
      border: 0;
      margin: 0;
    }


    <div><input type="text" name="email"  /><input type="submit" value="»" /></div>

Upvotes: 0

xkeshav
xkeshav

Reputation: 54016

TRY

body {
    background-color: #ccc;
}

input[type=text] {
  width: 218px;
}

Working DEMO

Upvotes: -1

Siebe
Siebe

Reputation: 952

The problem is your padding that is applying wrong to your button. Trying solving it like this.

input[type=submit], input[type=text] {
  font-size: 18px;
  line-height: 18px;
  float: left;
  border: 0;
  display: block;
  margin: 0;
  height: 30px; /* or whatever height necessary */
}

Additionally, you can keep the padding left and right on your button like this.

input[type=submit] {
  background: #000;
  color: #fff;
  padding: 0px 9px;
}

Upvotes: 2

luca
luca

Reputation: 37136

You need to remove the height and work on the actual height of the input text field just by padding/font-size

jsfiddle

Upvotes: 0

RobinJ
RobinJ

Reputation: 5243

input {
 height: 19px;
 }

This maybe? Also, remove the padding property. http://jsfiddle.net/xkeshav/e6aTd/1/

Upvotes: 1

phihag
phihag

Reputation: 287775

Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.

input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}

Upvotes: 9

Anze Jarni
Anze Jarni

Reputation: 1157

Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.

Upvotes: 0

RRStoyanov
RRStoyanov

Reputation: 1172

Remove/add line-height: 18px; for both.

Upvotes: 27

Related Questions