CSS styling on <select> form elements examples required


I'm looking for examples of CSS styling of form select elements, in particular a styling that would be a good counterpart to this button:

http://www.disciplin-of-magic.net/temp/buynow.png
LVL 86
CEHJAsked:
Who is Participating?
 
GrandSchtroumpfConnect With a Mentor Commented:
hi CEHJ, i did not notice it was you...
maybe you don't remember me from the java TA, but i was there a while ago.

the main problem is accessibility.
if you use a replacement, it should degrade as a standard select element when any combination of javascript/styles/images are disabled.
0
 
GrandSchtroumpfCommented:
styles for the select element are very limited.  the styles that are supported depend on the browser.
0
 
GrandSchtroumpfCommented:
Maybe you can work something out with background images...  like what's been done for an input/file here:  http://www.quirksmode.org/dom/inputfile.html
The results are never 100% prefect, especially when you encrease/decrease the text-size.
IMHO, it's better to use a standard select element and just let the browser apply the styles that it supports.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
CEHJAuthor Commented:
Actually i'm angling (pun intended) towards Suckerfish at the moment:


http://www.htmldog.com/articles/suckerfish/example/
0
 
CEHJAuthor Commented:
I do remember ;-)


>>if you use a replacement, it should degrade ...

Yes, i take your point there

0
 
GrandSchtroumpfCommented:
And note that, as it is, the suckerfish is not accessible because it requires the mouse to work.  Some modifications using the ":active" pseudo element can make it work with the keyboard... at least with browsers that support that (firefox supports it but opera does not).  No matter what you use as select replacement, it will require javascript to transfer the selected option into some form field.  This means you can also use javascript to ensure your replacement is accessible.
0
 
mreuringConnect With a Mentor Commented:
Hmmm, with the limitations we have in syling form elements the way to go would be using javascript to rewrite the DOM. When applied with care you'd enhance the form when certain javascript aspects are available while the more accessible select element will remain in effect for those that have no javascript support. Allas I have no such script 'on the shelf' at this time, but we could work something out if you're willing to take this road.

 Martin
0
 
CEHJAuthor Commented:
I like 'moving' buttons, but i think in this case i'll just keep it simple guys thanks
0
 
GrandSchtroumpfCommented:
keeping it simple is always the best solution.  =)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.