Styling selectbox via CSS

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.

David Thomas · Accepted Answer · 2011-10-14 10:31:38Z

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.

Jamie Dixon · Accepted Answer · 2011-10-14 10:24:03Z

0

The height of the select box needs to be set differently to the text boxes.

Setting the height of the select box to 27px makes it the same height as the text boxes for me.

Working Example

answered Oct 14, 2011 at 10:24

Jamie Dixon

54.1k21 gold badges131 silver badges168 bronze badges

Comments

Ehryk · Accepted Answer · 2011-10-14 10:28:18Z

0

Your height is set too small for the select. I added

select{
height: 27px;
}

to your css and it 'appears'. I surmise you're asking for more. After it's this height, what else are you asking for it to look like?

answered Oct 14, 2011 at 10:28

Ehryk

2,0083 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

Styling selectbox via CSS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related