CODEWITHSUNDEEP
cssxhtml
alex
alex

Reputation: 490153

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

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...

Upvotes: 73

Views: 54999

Answers (3)

Kornel
Kornel

Reputation: 100090

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.

Upvotes: 168

Herman Cordes
Herman Cordes

Reputation: 4976

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!

Upvotes: 0

Luke Schafer
Luke Schafer

Reputation: 9265

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)

Upvotes: 0

Related Questions