SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross-browser question: Modifying drop down arrow graphic?

    Does anyone know how this can be done? AFAIK, Safari on a Mac is out of the question, because (based on my assumption) the JavaScript should (in theory) target the OS's rendering engine, and we all know Apple wont let you fiddle with that.

    Anyhoo, this is the closest I've found to a solution:
    changing the drop down arrow in Windows

    However, as you can see, you can't seem to get a definite answer out of the whole thing (it's like finding a definition to a difficult word, only to find out the definition is full of difficult words as well. Typical Microsoft.)

    The only other theory I can come up with is targeting the browsers specifically, similar to how you can edit IE's scroll bars (although that isn't so easily done in FF, I have a feeling it can still be done via JS, except I don't know how. ).

    So... does anyone know how to directly edit the drop down arrow? How to replace it with an image? Or edit the colors? And still keep it XHTML 1.0 valid?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want to change how the <select> element is rendered? You can't do much. Some browsers will let you change the text and background colors and will let you change the padding but that's about it.

    Only IE7 supports scrollbar colors on the select element and only when the size > 1 and/or when the multiple attribute is set.

    It is possible to use a lot of JavaScript code to make a custom control that acts like it, but I don't recommend it because of accessibility issues.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    Designer
    Join Date
    Jun 2006
    Location
    Manila
    Posts
    590
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    So you want to change how the <select> element is rendered? You can't do much. Some browsers will let you change the text and background colors and will let you change the padding but that's about it.

    Only IE7 supports scrollbar colors on the select element and only when the size > 1 and/or when the multiple attribute is set.

    It is possible to use a lot of JavaScript code to make a custom control that acts like it, but I don't recommend it because of accessibility issues.
    Kind of explains why no one does it I guess.

    Although I do have a theory... *continues hacking*


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
  •