Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts

    Question <select> and <option> Styling.

    Hi, I think it would be best to show you the website: http://scalamoosh.com/form-demo/

    I am wanting the combo-box options to be styled in the same rounded border style as the text box, but in a way that looks like it is an extension of the select, and not separate.

    I hope that's clear enough, if not, ask away!

    Thanks
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You need to include the moz radius property to give the rounded corners:
    Code:
    article section form option {
      -moz-border-radius: 20px 20px 20px 20px;
      background: -moz-linear-gradient(center top , #F58233, #E15F0B) repeat scroll 0 0 transparent;
      border-bottom: 2px solid #BBBBBB;
      border-left: 2px solid #BBBBBB;
      border-right: 2px solid #BBBBBB;
      color: #220B28;
      font-size: 1.1em;
      margin: 0 auto;
      text-align: center;
      width: 200px;
    }
    But you'll also need to adjust the width and height ,etc., if you want it to look like a continuation of the 'select'.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Hint: You could cheat and copy the relevant properties from those for the select:

    Code:
    article section form select {
      -moz-border-radius: 20px 20px 20px 20px;
      background: -moz-linear-gradient(center top , #F58233, #E15F0B) repeat scroll 0 0 transparent;
      border: 2px solid #BBBBBB;
      color: #220B28;
      font-size: 1.4em;
      margin: 0 0 15px;
      padding: 8px 10px;
      text-align: center;
      width: 275px;
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Yeah, this was similar to how i had it before, but i removed the values because it looks like a list of buttons rather than a list.

    I have just added the
    Code:
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    back in, but would appreciate a little help to make it look like a continuation of the select.
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You said you wanted the same rounded corners, but apparently not; so I'm lost . Good luck.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Sorry, I did put it in a slightly confusing way.

    I want it so the top of the select and the bottom of the list of options has a round border, with everything in between it as normal. does that make sense?
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You'll need to give the last 'option' an id and style it with the rounded border (and remove the rounded borders from the other 'option's).
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    hmmm, That's going to be a bit harder than it sounds.

    The data that is to populate the combo-box is done so through a JSP logic:iterate.

    Back to the drawing board I think.

    Thanks Anyway!
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    CSS3 has the 'last-child' selector
    Code:
    article section form select:last-child { }
    but, typically it's not supported by IE8 or earlier.

    Added: Actually, I would use this anyway, and just accept that it won't look quite as good in this older browser.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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