SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling <select> tags in HTML5

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Personally, I'd leave them as is, but you can style them to some extent, such as

    Code:
    #pt123_product_color select {
      background: blue;
      border: none;
      float: right;
      margin-bottom: 15px;
      margin-right: 15px;
    }
    etc.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,490
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    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

  4. #4
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Enthusiast shotdsherrif's Avatar
    Join Date
    Oct 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code CSS:
    #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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,490
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by shotdsherrif View Post
    . btw, I found a site that does style select boxes pretty specifically.
    Flat Holiday Photo Cards - Radiant Holly by Tiny Prints

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •