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

your solutions worked and helped me a lot! thanks! Up voted already! — SalmaBegum
– SalmaBegum, Commented Apr 26 at 1:24

CloudyMarble · Accepted Answer · 2011-02-23 08:21:33Z

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, 2011 at 8:21

CloudyMarble

37.7k70 gold badges103 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user529141 Over a year ago

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

user529141 Over a year ago

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.

user529141 Over a year ago

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.

Graham Clark · Accepted Answer · 2011-02-23 08:00:55Z

2

Why not do this?

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

select {
   width: 205px;
}

answered Feb 23, 2011 at 8:00

Graham Clark

13k8 gold badges56 silver badges84 bronze badges

4 Comments

user529141 Over a year ago

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?

Graham Clark Over a year ago

@Senthil: yes, sorry, I couldn't resist. It's always been a pain to style the <select> element. I'm not sure what you mean about the theme - can't you adjust the width of the elements on a theme-by-theme basis? I think that's the best you can do.

user529141 Over a year ago

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

Graham Clark Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related