Solved

CSS styling on <select> form elements examples required

Posted on 2006-06-22
9
1,700 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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.

 
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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

627 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