562153 - Width of HTMLSelectElement differs from HTMLInputElement even though same value provided

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[omegajunior]

User-Agent:       Opera/9.80 (Windows NT 5.1; U; en) Presto/2.5.24 Version/10.52
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a5pre) Gecko/20100414 Minefield/3.7a5pre

For all select elements and input[type=text] elements in the center of that page, the following style rule was defined: width: 144pt; padding: 2pt. Nonetheless, the select elements were shown narrower (also in competitive browsers). Then the style rule of the select element was changed to width: 148pt; padding: 2pt 0;. In 2 competitive browsers, the select element now was rendered equally wide to the input elements. In this version of Firefox however, as well in the latest version of Opera, the select element is still shown narrower than the input element.

Reproducible: Always

Steps to Reproduce:
1. Build a form with input[type=text] and select elements below each other - create select elements with combinations of differing values for the properties multiple and size;
2. Align the left edge of the form controls and assign an equal width using css - make everything else equal;
3. Add some random text to both kinds of controls.

The mentioned page tries to use HTML5 with regular HTML4 forms. The parent div of these controls has its display set to table-cell. The parent div thereof does not have its display set to table-row, because table rows should not show their own borders and shadows, which are requested.
Actual Results:  
The select element turns out narrower than the input[type=text].

Expected Results:  
The select element should have shown up equally wide.

Using Windows XP classic theme with a 13px scrollbar width. The problem appears in multiple builds of Firefox (and Opera, just so you know you're in good company), and not only in the mentioned form in the center of that page, but also in the aside element to the left (but there it's in a part of the page that remains invisible until you log in... which is fully possible since the page is a mock-up).

I did label this problem's severity as trivial, but we have clients that absolutely insist that their pages look as designed. Having to tell them that their preferred browser simply refuses to behave is always met with disgruntlement.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The exact values and effect of padding on form controls aren't defined.

Instead of trying to match the paddings (which won't work, esp. not if you use pt for it, since the fonts used for the form controls differ on different computers), you probably want to set -moz-box-sizing:content-box on your <select>s so they'll use content-box sizing like the text inputs do.

Comment 2

[omegajunior]

Thank you Boris, I have added the suggested css rule and now the select elements are sized like the text inputs.

I had noticed matching the padding failed, and thus had set them to 0 for left and right. Box sizing or no box sizing, no matter what platform, 150pt wide should equal 150pt wide from one control to the next. For the text inputs this is reached by adding 4pt padding and 2pt border to 144pt width. For the select elements it's reached by adding 2pt border to 148pt width. Yet Firefox needs a separate setting to do basic math. What am I missing?

Comment 3

[Boris Zbarsky [:bzbarsky]]

> 150pt wide should equal 150pt wide from one control to the next.

Ah, yes.  Sorry, mixed up pt and em in my head somehow...

> Yet Firefox needs a separate setting to do basic math. What am I missing?

Please read http://www.w3.org/TR/css3-ui/#box-sizing

<select> uses "box-sizing: border-box" in Gecko and in several other UAs.

Comment 4

[Christian]

> you probably want to set -moz-box-sizing:content-box on 
> your <select>s so they'll use content-box sizing like the text inputs do.

But why does select boxes use another box-sizing as text inputs on default?

Comment 5

[Boris Zbarsky [:bzbarsky]]

Because web sites depend on that behavior.

Comment 6

[Christian]

I would assume it the other way round. It would be easier to create nice looking forms if select boxes would use the same default box-sizing as input boxes, or not?

Comment 7

[Boris Zbarsky [:bzbarsky]]

The point is there is existing CSS out there that sets particular widths on select boxes and expects them to be that width even when the border and padding are included.  If we change them to content-box sizing they get wider with that same CSS and start overflowing their parents or wrapping to the next line, totally breaking the layout of some (badly-designed, but that's normal) sites.

Trust me; I tried changing the sizing on <select> at one point, and things broke all over the place.  :(

Comment 8

[Christian]

So it's just a backward compatibility issue?

Comment 9

[Boris Zbarsky [:bzbarsky]]

Yes, exactly.