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?

Same Question asked here: http://stackoverflow.com/questions/895904/select-inputs-and-text-inputs-in-html-best-way-to-make-equal-width/899283 — BlaM, Mar 18 '13 at 14:02

Gabriele Petrioli · Accepted Answer · 2015-02-02T16:11:03.260

143

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/

edited Feb 02 '15 at 16:11

answered Nov 01 '10 at 23:09

Gabriele Petrioli

191,379
34
261
317

Thanks for reply. And if I set border for 2px, there will be 4 pixels between input and select fields, for 3px border - 6px...? – luk4443 Nov 01 '10 at 23:38
1

@luk, no. If both input and select have the same border width then the difference will remain to 2 pixels.. – Gabriele Petrioli Nov 01 '10 at 23:43
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) :( – luk4443 Nov 01 '10 at 23:50
@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.. – Gabriele Petrioli Nov 02 '10 at 00:10
So, it seems it's not so easy to solve :( Two elements on form and there are such problems to set equal width :( – luk4443 Nov 02 '10 at 07:57
3

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. – O'Rooney Apr 11 '12 at 04:14
@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. – Gabriele Petrioli Apr 11 '12 at 10:03
FYI most browsers nowdays don't need prefixes anymore. – SeinopSys Aug 04 '14 at 18:22
clearly does not work if border is not set, like: http://jsfiddle.net/gaby/WaxTS/5/ use the answer below to solve the problem (tomsv one) – mikus Dec 17 '14 at 14:15
@mikus, works just fine in the example you posted (*mine*). What do you think does not work ? – Gabriele Petrioli Dec 17 '14 at 15:50
1

@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. – mikus Jan 07 '15 at 15:18
@mikus yes.. this solution only works when you reset the borders as well. I am assuming it did help the OP since he accepted it.. – Gabriele Petrioli Jan 07 '15 at 16:00
2

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. – Scott Marcus Jan 31 '15 at 21:37
@user1739635, agreed! Although, in this case it looks like you can remove the vendor prefixes altogether [according to caniuse on box-sizing](http://caniuse.com/#feat=css3-boxsizing) – KyleMit May 18 '15 at 21:00

score 132 · Answer 2 · edited May 18 '15 at 20:54

132

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;
}

edited May 18 '15 at 20:54

KyleMit

30,350
66
462
664

answered May 05 '11 at 09:26

tomsv

7,207
6
55
88

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. – Vennsoh Aug 22 '13 at 03:03
2

Here's a good [argument for why you should use `box-sizing: border-box`](https://css-tricks.com/international-box-sizing-awareness-day/). For a good universal implementation, consider [setting on the top level html element and then inheriting down](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/) so it can be easily overridden. – KyleMit May 18 '15 at 20:56
1

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. – Manuel Hoffmann Oct 09 '18 at 09:32

score 9 · Answer 3 · edited Aug 22 '15 at 09:29

9

Add this code in css:

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

edited Aug 22 '15 at 09:29

khaja firoz

221
2
14

answered Aug 08 '15 at 09:50

151291

3,308
7
48
81

1

this is the first one from the top that worked for me, thanks :) – sjjk001 Aug 27 '20 at 08:17

Rubel · Answer 4 · 2021-06-18T12:37:19.710

0

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;
    }

edited Jun 18 '21 at 12:37

answered Jun 18 '21 at 12:30

Rubel

1,255
14
18

score -2 · Answer 5 · answered Jan 07 '16 at 11:03

-2

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

answered Jan 07 '16 at 11:03

ionMobDev

351
1
4
20

How to get equal width of input and select fields

5 Answers5

Linked

Related