[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

CSS styling on <select> form elements examples required

Posted on 2006-06-22
9
Medium Priority
?
1,732 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
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

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!
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

612 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