Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS styling on <select> form elements examples required

Posted on 2006-06-22
9
Medium Priority
?
1,728 Views
Last Modified: 2013-11-19

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
0
Comment
Question by:CEHJ
  • 5
  • 3
9 Comments
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16958765
styles for the select element are very limited.  the styles that are supported depend on the browser.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16958808
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
 
LVL 86

Author Comment

by:CEHJ
ID: 16958929
Actually i'm angling (pun intended) towards Suckerfish at the moment:


http://www.htmldog.com/articles/suckerfish/example/
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 640 total points
ID: 16959002
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
 
LVL 86

Author Comment

by:CEHJ
ID: 16959012
I do remember ;-)


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

Yes, i take your point there

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16959043
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
 
LVL 17

Assisted Solution

by:mreuring
mreuring earned 160 total points
ID: 16967023
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
 
LVL 86

Author Comment

by:CEHJ
ID: 16967111
I like 'moving' buttons, but i think in this case i'll just keep it simple guys thanks
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16967964
keeping it simple is always the best solution.  =)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question