Question

i’ve got a problem with the styling of a select box via css. It should look like the other in puts in my page. Here is an exmaple of my current code for you.

<select>
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>
<br>
<input type="text" style="width:35px;margin-right:0px;">
<input type="text" style="width:180px;">

And here the CSS i use:

input[type=text], textarea, select{
    border: 1px solid #cccccc;
  font:10px sans-serif;
  background-color: #ffffff;
  width: 240px;
  height:14px;
  padding:5px;
    color: #101010;
}

Here you can find a fiddle with the problem if got: http://jsfiddle.net/6VGWc/. The selectbox is “invisible”. I hope you can help me.

Answer 1

I’m not entirely sure what your question is, but adding a box-sizing rule makes the content (the first option of the select element) visible:

-moz-box-sizing: content-box; /* for Firefox/Gecko browsers */
-webkit-box-sizing: content-box; /* for Webkit-based browsers, Safari, Chrome, Chromium... */
-o-box-sizing: content-box; /* for Opera */
box-sizing: content-box; /* or 'padding-box' or 'border-box' */

Updated JS Fiddle demo.

Please note that styling a select box is often difficult to do cross-browser, as they’re often simply replaced elements (much like an img) supplied/handled by the OS, rather than the browser itself.

If, however, you choose to declare a specific height (or min-height) to the element this would work, but may be more difficult to manage should your styles ever change subsequently.