Solved

CSS styling on <select> form elements examples required

Posted on 2006-06-22
9
1,656 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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 …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now