How to set the same width for HTML text input and drop down input

Question

I have the two HTML elements like so:

<input type="text">

and

<select>
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Grapes</option>
</select>

I am not at all able to make them the same width. No matter what width I specify for BOTH the elements, 100% or 200px or whatever, the drop down always seems to be about 5px shorter than the text box. This happens in IE, Firefox and Chrome - in WINDOWS.

How can I set them to have the same width?

Solution

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

score 5 · Accepted Answer · answered Feb 23 '11 at 08:21

5

Take a look at this working Example

You can modify the CSS just to keep it like:

input, select
 {
    width:250px;        
 }

answered Feb 23 '11 at 08:21

CloudyMarble

36,908
70
97
130

+1 doesn't solve the problem completely since I am forced to set a custom border to achieve 100% width equality. I noticed you'd have to compulsorily set the border to make it work - and it destroys the native look and feel. I'd like to have the native border for the controls. But it solves the width issue. – Feb 23 '11 at 08:25
Best option so far... so marking as answer. But I'd really like to leave out the border thing and be able to set the width. – Feb 23 '11 at 09:27
1

Thanks for introducing me to the box-sizing property. After some experimenting, I found that when I set it to `border-box` rather than `content-box`, I get the desired effect WITHOUT setting a border. – Feb 23 '11 at 09:52

score 2 · Answer 2 · answered Feb 23 '11 at 08:00

2

Why not do this?

input[type="text"] {
   width: 200px;
}

select {
   width: 205px;
}

answered Feb 23 '11 at 08:00

Graham Clark

12,886
8
50
82

1

Really clever and practical :) but I am the kind of person who doesn't get sleep after making a "hack". I am curious.. why wouldn't they be the same width? And your solution... the width difference may increase to 10px or decrease to 0 depending on the theme also. What would I do then? – Feb 23 '11 at 08:05
@Senthil: yes, sorry, I couldn't resist. It's always been a pain to style the ` – Graham Clark Feb 23 '11 at 08:54
By theme, I meant Windows theme - Like Windows Classic, Windows XP, Windows 7 Default theme. Each windows theme defines different border widths and 3d effects for controls etc.. I was wondering whether THOSE will affect the width by a few pixels each time. I wouldn't be able to adjust for those.. – Feb 23 '11 at 09:04
@Senthil: ah, ok. I think in that case you're going to have to choose between abandoning the native look & feel and getting the inputs exactly the same size across all OS's. – Graham Clark Feb 23 '11 at 09:15

How to set the same width for HTML text input and drop down input

2 Answers2

Linked