SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS3 rounded corner + <select> drop down

    I need help in using the CSS3 rounded corner to style my <select> drop down. So far I have this:
    Code:
    #example1 {
    border-radius: 15px;
    width:150px;
    Code:
    <select id="example1">
    <option>1</option>
    <option>2</option>
    </select>

    The problem with this is that the little box with the arrow is still squared. How can I "shape" that to conform with the box (border topleft and bottomleft 90 degree, while topright and bottomright rounded)?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I can pretty much guess there is no way to cross browser that at all. The only way I found was to use this { visibility: inherit; } jQuery Custom Select!

  3. #3
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It has nothing to do with the browser, it has to do with the OS underneath.

    Browsers don't have their own interface objects, they use the ones the underlying OS provides for them.

    One good example of transformed select elements is Google Translate. A good VISUAL example. The mark up has some semantic problems.

    Like Eric said, a JS/CSS solution is required. It would be interesting if Paul would start his quizes again and challenge us to find a pure CSS way for a custom select element skin.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by noonnope View Post
    = It would be interesting if Paul would start his quizes again and challenge us to find a pure CSS way for a custom select element skin.
    Hmmm...now you've got me thinking

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Face it, Paul, it's been a long time. Do you think you still know how to do it?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by khwebdesigns View Post
    I need help in using the CSS3 rounded corner to style my <select> drop down. So far I have this:
    Code:
    #example1 {
    border-radius: 15px;
    width:150px;
    Code:
    <select id="example1">
    <option>1</option>
    <option>2</option>
    </select>
    The problem with this is that the little box with the arrow is still squared. How can I "shape" that to conform with the box (border topleft and bottomleft 90 degree, while topright and bottomright rounded)?

    You can round the select quite easily with border-radius but not the option box or the little arrow.

    To make the select round you first have to define the border because the default border is specially supplied and won't round.

    Code:
    select {
        width:150px;
        border:1px solid red;
        -webkit-border-top-right-radius: 15px;
        -webkit-border-bottom-right-radius: 15px;
        -moz-border-radius-topright: 15px;
        -moz-border-radius-bottomright: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        padding:2px;
    }

    Quote Originally Posted by noonnope
    Face it, Paul, it's been a long time. Do you think you still know how to do it?
    lol - I like a challenge

    See attachment for a screenshot of a version that works in IE8 and upwards. It requires images though.

    I think it would make an interesting quiz as I'm sure some bright spark could come up with something better.
    Attached Images Attached Images

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or worse! Does it really matter?

    What you're waiting for then !?

  8. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your post Paul. It works perfectly.


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
  •