How to get equal width of input and select fields

Question

On the form, I have one select and two input fields. These elements are vertically aligned. Unfortunately, I can't get equal width of these elements.

Here's my code:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

For above example, the best width for select element is 198 or 199 px (of course I tried 193px, but the difference is major). I think, it depends on resolution, on various computers and browsers since these elements don't have equal widths (sometimes I thinks difference is about 1 or 2 px). I've tried to set these elements in div or table rows, but it doesn't help.

Q: How could I get precisely equal width of these elements?

Essa

Same Question asked here: #896404 – Doradorado

Answer 1

Updated answer

Here is how to change the box model used by the input/textarea/select elements so that they all behave the same way. You need to use the box-sizing property which is implemented with a prefix for each browser

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

This means that the 2px difference we mentioned earlier does not exist..

example at http://www.jsfiddle.net/gaby/WaxTS/5/

note: On IE it works from version 8 and upwards..

---

Original

if you reset their borders then the select element will always be 2 pixels less than the input elements..

example: http://www.jsfiddle.net/gaby/WaxTS/2/

Sponson

Thanks for reply. And if I set border for 2px, there will be 4 pixels between input and select fields, for 3px border - 6px...? – Essa

@luk, no. If both input and select have the same border width then the difference will remain to 2 pixels.. – Sponson

Thanks. I try your code in various browsers and in Firefox everything is all right, but it doesn't work in IE 8 and Opera (there are differences beetwen input and select width) :( – Essa

@luk, you are right .. my mistake.. it seems the select box increases the border on the inside instead of the outside like all other elements.. – Sponson

So, it seems it's not so easy to solve :( Two elements on form and there are such problems to set equal width :( – Essa

Perhaps you were meaning to specify box-sizing: border-box? I think that's what you meant. Content-box is the default where padding+margins add to width. – Creedon

@O'Rooney for form elements the default is content-box (except the select element). My answer just says that he needs to use the same for all input elements, because that was the OP problem.. whether you use content-box or border-box is not important.. the important part is to make it consistent across the form elements. – Sponson

FYI most browsers nowdays don't need prefixes anymore. – Opuscule

clearly does not work if border is not set, like: jsfiddle.net/gaby/WaxTS/5 use the answer below to solve the problem (tomsv one) – Courtenay

@mikus, works just fine in the example you posted (mine). What do you think does not work ? – Sponson

@gaby, your jsfiddle looks horrible in current chrome, and if you remove border definition from css, the original problem comes back, which makes it useless. I dont see how your solution helps anything Anyway, the one presented below, works just perfect, and solves the problem regardless settings, browsers etc. – Courtenay

@Courtenay yes.. this solution only works when you reset the borders as well. I am assuming it did help the OP since he accepted it.. – Sponson

It really should be: -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; The standard syntax should go last to follow progressive enhancement methodology so that in the future when the standard is widely implemented, user agents will default to use the standard syntax and you can remove the prefixed versions. – Transistorize

@user1739635, agreed! Although, in this case it looks like you can remove the vendor prefixes altogether according to caniuse on box-sizing – Swee

Answer 2

I tried Gaby's answer (+1) above but it only partially solved my problem. Instead I used the following CSS, where content-box was changed to border-box:

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

Lamoree

Yup, it seems that form fields eg: textarea, input fields always work good with border-box box model. button, checkbox, radio, submit, reset, and search input are border-box by default. – Gurglet

Here's a good argument for why you should use box-sizing: border-box. For a good universal implementation, consider setting on the top level html element and then inheriting down so it can be easily overridden. – Swee

content-box did nothing in my case. I needed border-box for them to be the same width. Border-box is definitely the better solution, thanks. – Classicist

Answer 3

Add this code in css:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

Higgs

this is the first one from the top that worked for me, thanks :) – Calcification

Answer 4

First set the width of each element equal, in your case width either 193px or 198px. Then you can follow one of them below.

a. add this line box-sizing: border-box; in the style of you select and input. just like style="width:198px; box-sizing: border-box;"

or

b. add these lines in your CSS (external on internal CSS whichever you are using).

select, input{
      box-sizing: border-box;
    }

Gave

Answer 5

create another class and increase the with size with 2px example

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

Joacima