Select inputs and text inputs in HTML - Best way to make equal width?

Question

I've got a simple form like so (illustrative purposes only)...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

My layout method using CSS is as follows...

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

This all aligns quite nicely, except my select element (in Firefox anyway) isn't always the same width as my other input elements. It generally is narrower by a few pixels.

I've tried changing the width to a pixel size (e.g. 200px) but it has not made a difference.

What is the best way to get these to all have the same width? I hope it doesn't resort to me setting the select's width individually, or putting them into tables...

Can I tell you a dirty little secret? I use tables to format my forms. It's just way too easy. But Sssssshh, keep that on the down low. — Paolo Bergantino
– Paolo Bergantino, Commented May 22, 2009 at 0:17
In all seriousness, though, have you tried setting margin and padding to 0? — Paolo Bergantino
– Paolo Bergantino, Commented May 22, 2009 at 0:18
Paolo, I did originally (and it was easy to make the inputs the same width) but I have strived to do it table less and have succeeded over the last 8 months or so ... this one is just giving me grief. — alex
– alex, Commented May 22, 2009 at 0:21
I had padding (to give between the borders and text some room to breathe) and when I removed the padding, the difference is less (but then my text is hard up against the borders) — alex
– alex, Commented May 22, 2009 at 0:22
Oh, I know. I love CSS and I obviously agree with its ideas of semantic relevance and such, but when it comes to forms I just like the flexibility and simplicity of tables. Anyways, I'm not sure why this is happening. Form fields are infamous for just how painful it is to get them to style how you want. Sorry. :) — Paolo Bergantino
– Paolo Bergantino, Commented May 22, 2009 at 0:25

KyleMit · Accepted Answer · 2015-05-18 20:39:33Z

168

The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

There's normalize.css project that aggregates such tricks.

edited May 18, 2015 at 20:39

KyleMit♦

31k74 gold badges517 silver badges712 bronze badges

answered May 22, 2009 at 18:25

Kornel

101k38 gold badges235 silver badges323 bronze badges

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

10 Comments

alex Over a year ago

Might give this a try... do you have any recommended reading on the subject?

SpliFF Over a year ago

this worked for me, brilliant. This has been bugging me for ages.

Andy Over a year ago

You also may want to give the elements a standard vertical-alignment if they are contained within the same element.

Philipp Michael Over a year ago

For IE7 you could use box-sizing-polyfill. Just add *behavior: url(boxsizing.htc); after box-sizing: border-box;

Adam Grant Over a year ago

If anyone else is scratching their heads trying this with a "search" type input, and not text, be sure to target input[type="search"] as this defaults to border-sizing: content-box in some browsers.

|

alex · Accepted Answer · 2009-05-22 22:39:48Z

0

padding will make the text be closer to the edge of the box.

try setting the margin to 0px, and if that seems right, play around with it (like just setting margin-left only)

edited May 22, 2009 at 22:39

alex

492k205 gold badges891 silver badges992 bronze badges

answered May 22, 2009 at 0:30

Luke Schafer

9,2762 gold badges30 silver badges29 bronze badges

1 Comment

alex Over a year ago

I tried using padding: 0 & margin: 0 with !important on the inputs, selects and input-row div, but it just bunches them up real tight. The select box is about 2px narrower (which may have something to do with the border)

Herman Cordes · Accepted Answer · 2010-01-28 15:59:09Z

0

Had same problems with 100% width table and cells, with a textbox (also with width at 100%) wider than the table cell.

This solved my problem in the css:

table td
{
    padding-right: 8px;
}

Not the best solution ever, cause you probably get some additional space to the right side. But at least it's not hiding anymore!

answered Jan 28, 2010 at 15:59

Herman Cordes

5,03610 gold badges56 silver badges91 bronze badges

1 Comment

stracktracer Over a year ago

I'm doubtful about such absolute sizes. If you use another browser, another window manager / windows style, this is likely to not work any more.

Collectives™ on Stack Overflow

Select inputs and text inputs in HTML - Best way to make equal width?

3 Answers 3

10 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related