CODEWITHSUNDEEP
htmlcssheight
Glen Solsberry
Glen Solsberry

Reputation: 12320

What causes this select box to display at 6px height?

I have the following simplest code sample:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style>
      input, select { height: 16px; padding: 3px; width: 14em; }
    </style>
  </head>
  <body>
    <form action="a" method="post" enctype="application/x-www-form-urlencoded">
      <input type="text" value="Hello" />
      <select id="country" name="country">
    <option value="-1">Select ... </option>
    <option value="217">United States</option>
      </select>
    </form>
  </body>
</html>

This code should output a simple select box that is 16px high, and 14em wide. Firebug's "Style" tab shows height: 16px;. Clicking on the "Computed" tab shows a box model height of 6px. Chrome's Inspector shows Style height: 16px;, but "Metrics" shows height as 8px. "Computed Styles" shows height at 16px.

Can anyone tell me why setting the height specifically at 16px causes an unexpected action in both Firefox (Linux, 12.0) and Chrome (Windows, 19 and Linux, 21)?

EDIT: Missed the input box in the paste. It "correct" displays at 16px height.

Upvotes: 0

Views: 464

Answers (2)

Interrobang
Interrobang

Reputation: 17434

The browser contains what is known as a "user agent stylesheet" that can override some CSS that you set. This is why <select> boxes look different than, say, a text field.

One of the things set by the browser is that <select> boxes use "border-box" sizing, not "content-box". So the height of the <select> is the height of the content, padding, and border-- not just the height of the content.

You can override the user agent stylesheet:

-moz-appearance: none;
-webkit-appearance: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;

Will give you a <select> that is exactly the height you request (but without chrome).

Example Fiddle: http://jsfiddle.net/Zw6hY/2/

Upvotes: 1

S&#243;fka
S&#243;fka

Reputation: 993

Ok, so each web browser interpretates select styles diffrently. Firefox takes 16px of height as total height with padding, and it makes

16px(height) - 2*3px(padding) = 10px of height

Moreover, Safari takes border also as a part of height, and it makes

16px(height) - 2*3px(padding) - 2*1px(border) = 8px of height

Upvotes: 1

Related Questions