SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    style select dropdown w/o arrow....

    this is what I need to do...

    http://mayacove.com/dev/select.gif

    I have never styled select dropdowns without the arrow....

    I searched, found some stuff on SO,

    Code:
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    but this is working only on Chrome, not on FF (and IE I have no idea..... ;-o )

    this is what it looks like in Chrome:
    http://mayacove.com/dev/select_chrome.jpg
    ff: http://mayacove.com/dev/select_ff.jpg

    thank you very much....


    PS: this is from current site,
    http://mayacove.com/dev/select_curr.gif
    (can't post url b/c it's behind a login firewall...)

    it looks like there's a div "on top" of actual select... select has opacity:0 but at the same it's being styled also...

    Code:
    select { 
        opacity: 0;
    }
    
    select.sorter {
    	width:180px;
    	margin-right:1px;
    	height:38px;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The simple fact of the matter is that you cannot style select elements cross browsers to look the same with css alone. It's just not possible (yet) to change the appearance much or add custom images. You would need a JS/Jquery solution to do that where the select element is swapped out of the html and replaced with a css dropdown and values swapped between the two with js.

    Here are some common scripts.
    http://www.marghoobsuleman.com/jquery-image-dropdown
    http://ivaynberg.github.io/select2/
    http://v2.easy-designs.net/articles/replaceSelect/

    There is a css trick you can use and make the dropdown wider than you need and then cut off the overflow so you can't see the default arrow. You can then overlay a custom arrow image over the select. The seelect wil still work as it works on any part of the visible section and not just the arrow.

    The drawbacks is that you can't control the option width which will be wider and in IE the current item stays highlighted blue and spoils the effect a little.

    Here's a link to an article that explains that method.

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    789
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you very much... oh man.. I get this last-min job that I needed badly.. and come across this highly stylized dropdown request... something I confess I have never done before....;-o

    thank you for all the links you posted.. I also found this jQuery select dropdown plugin that looks very cool...
    https://code.google.com/p/select-box/
    maybe I'll give this a try...
    since jQuery is really good with cross-browser, I hope it'll work in IE as well as in the sane browsers...;-)

    thank you very much, Paul.. I appreciate all your help.....


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
  •