CODEWITHSUNDEEP
cssselectinput
Frederick Behrends
Frederick Behrends

Reputation: 3095

Styling selectbox via CSS

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.

Upvotes: 0

Views: 1531

Answers (3)

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 3

Ehryk
Ehryk

Reputation: 1990

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?

Upvotes: 0

Jamie Dixon
Jamie Dixon

Reputation: 53991

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

Upvotes: 0

Related Questions