Styling <select> tags in HTML5

HTML & CSS
1

Hello,

I am creating a site in HTML5 and the design I was given is very clean and “boxy” - no rounded corners in other words … which is fine except I’m noticing that <select> tags are defaulting to rounded corners and even some use of gradient in FF, Chrome and Safari. See the “Get Started” box here …

Products Form 123

You can see I was able to change the color of the <option> text, but I’m trying to figure out how to control the rendering of the <select> tag itself …

Has anyone tried this …

2

Personally, I’d leave them as is, but you can style them to some extent, such as

#pt123_product_color select {
  [COLOR="Red"]background: blue;
  border: none;[/COLOR]
  float: right;
  margin-bottom: 15px;
  margin-right: 15px;
}

etc.

3

Hi,

The select element is square in IE, Safari and Firefox on the PC. It’s only mac systems that they get rounded.

You can remove it for Firefox using -moz-appearance:none but the similar webkit rule leaves webkit without the arrow.


select{
    -moz-appearance:none;
    -webkit-appearance:none;
    border:1px solid #000;
    background:#fff;
    -webkit-border-radius:0;
    border-radius:0;
}

All in all they are better left alone as much as possible :slight_smile:

4

Thanks for the feedback. I’d leave them alone myself too, but when asked … btw, I found a site that does style select boxes pretty specifically. I think if I can reset the select to none, I can then add a border … the only attribute I’m missing then is a custom img for the arrow …

Flat Holiday Photo Cards - Radiant Holly by Tiny Prints

Thx again

5

Here’s what I’ve found to work pretty evenly in Chrome and FF

Products Form 123

I’m still not replacing that arrow with my own image but getting there …

Here’s the CSS I used

#form2carttest select {
    -moz-appearance:button;
    -webkit-appearance:button;
    background-image: url(images/select_arrow.png);
    border:1px solid #766A62;
    background:#fff;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    border-radius:0;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-position: center right;
    background-repeat: no-repeat;
    color: #766A62;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
}
6

That site styles them with the aid of javascript and swaps the selects for styled divs and spans.:slight_smile: