If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

It's notoriously difficult to style select and option elements consistently across browsers. You can try styling the option elements too (border:0; padding:0; margin:0; background:#000; ) but you probably won't get exactly the same thing across the board.

It's covered in the tutorial (the code above is a bit neater and comes from the link at the end of this post) - give the select elements transparent styling to allow your custom styling of the surrounding div to show through. You would need to play around with the div styling (and possibly create an image) yourself though to get the look you want. I'm not at a computer so I can't test anything or elaborate further.

As I said before though, its notoriously difficult to get select dropdowns looking consistent across all browsers with CSS alone, and what works in one won't work in another because differing default browser styling takes over. If the styling is not absolutely critical it might just be easier to go with the flow and accept what you already have.

If you absolutely must make the select dropdowns look the same on all browsers, there are JavaScript and Flash alternatives out there but they are quite complicated and bloated. Here's an example of one of the more lightweight versions I've seen (if youre already using jQuery) but its still not 100% on all browsers and devices : http://thephuse.com/development/cust...-select-menus/

Just something to add - remember that you have inline styling on your select element already so whatever you add to an external CSS file for the select element will be overridden by the inline style. You will need to remove the inline style or also add the transparent CSS references inline to make them effective.

BTW, is there a script on your page that is deactivating the right-click menu action? I'm on iPhone so I don't have a mouse as such, but I tried to view your source code with my usual code-viewing app and it wouldn't work - that usually happens with one of those right-click prevention scripts - can you temporarily disable that script while you're seeking help? It would just make things a heck of a lot easier for us and then you can apply it again, if you need to, afterwards.

Well, with "background-color:transparent" in your CSS it would be transparent, but you've set it to "background:#444577", which is defeating the transparency and causing everything to go black(ish) - with this technique, the full transparency is what's supposed to happen

Now you would apply your styling and background image (that's where you'd recreate the downwards arrow) to the div that is surrounding the select. The custom div styling will show through the select because its 'invisible'.

I don't think you're understanding the concept if the technique described in both tutorials - you need to wrap the now invisible select element in a div, which you will style to look like a dropdown menu again with the help of a background image that you create yourself (whatever look you want to achieve)

Please refer to both tutorials again so you understand what it is they're trying to accomplish.