Solved

CSS styling on <select> form elements examples required

Posted on 2006-06-22
9
1,676 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 160 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 40 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

809 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