CODEWITHSUNDEEP
htmlcssselect
Luiz Gustavo F. Gama
Luiz Gustavo F. Gama

Reputation: 63

combo box (select) css width issue (any browser)

There is an inconsistency between the width property typed into the CSS and rendered value in combo boxes.

http://jsfiddle.net/ZceeE/

css:

.foo {
    width:300px;
    padding:10px;
    border:1px solid #ccc;
}

html:

<input type="text" id="text" class="foo"><br><br>
<select id="combo" class="foo">
    <option>bar</option>
</select>

The "select" element is substracting padding and borders from width before render. Is it normal? If so, theres some documented explanation?

Upvotes: 0

Views: 924

Answers (1)

cimmanon
cimmanon

Reputation: 68319

Yes, that's normal. That's how the CSS box model works.

http://css-tricks.com/the-css-box-model/

Upvotes: 1

Related Questions