INPUT[type=text] and SELECT: Setting widths

Why won't the widths render the same for these elements?

Because the world isn't a perfect place, that's why.

If you're coding a nice clean form and you want your <select> tags and your <input type="text"> tags all to be the same width, you would think that:

input[type=text], 
select { 
     border: solid 1px #c2c1c1; 
     width: 150px; 
     padding: 2px; 
     }

...would do the trick.

But no, <select> Renders differently (and it always has, remember that old z-indexing issue in old IE browsers?). It turns out that when you set the width of a <select>, that is the width it gets.

When you set the width of the <input type="text"> (and any other element), it gets that width + any padding you set + the border width. <select>doesn't roll that way

So after you set the above styles, you then need to set a special width for :

select { 
     width: 156px; 
//needs to be input[type=text] width + [2×(border and padding)] }

A PITA, but that's like in the UXDEV world...