Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Style options drop down menu (in a form) using only CSS?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #32379

    Can I style select (options) drop down menu’s using only CSS?

    The attached link demonstrates the look I’m trying to achieve.

    Can I attain consistency across browsers using only CSS? I imagine if I used background images, I’d have to incorporate sliding doors in order to have fluid widths? Or CSS3 multiple background images?

    Cursory reading indicates I’ll have to use javascript…but the articles I’m finding are really old.

    link to example: http://dl.dropbox.com/u/1550420/questions/select-artwork/select-artwork.html%5Dselect-artwork

    #50682
    #50683
    DogsGhost
    Member

    Even though browsers have their own default renderings for them, form tags like label, select, input, and option can be targeted and styled successfully with css.
    If you want fluid width with background images, yes you use one of the many solutions for doing so.

    #50568

    Hi, DogsGhost, thanks for the reply. I’ve explored it a bit more and it seems the select is impossible to style using only CSS. We might be able to change the border or the background color, but the arrow “icon” in the selector, for example, cannot be altered via CSS alone (in the major browsers).

    The solution is to use JavaScript. Here’s a good jQuery plugin to address the styling of select boxes: http://snipplr.com/view/29233/custom-select-box-css-style-plugin-jquery–css/

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.