Page 1 of 1

Styling select elements

Posted: Sat Jun 13, 2009 5:17 pm
by allspiritseve
I need to style my select elements for a client. This is going to involve some JS, which is fine. I've been searching through solutions and most seem overly complex. Has anyone come across a simple solution that [ideally] uses minimal markup for a completely custom select dropdown? Must degrade gracefully.

Re: Styling select elements

Posted: Sat Jun 13, 2009 5:41 pm
by JAB Creations
Styling a select element isn't going to get more custom then you will find on my site's Music Player.

If you're trying to style the drop-down menu portion it's background-color and text color are adapted from the select element's background-color and color properties.

You could technically build your own using XHTML, CSS, and JavaScript though if the user has JavaScript disabled the menu won't be accessible...and you will have to program accessibility with JavaScript. However if you're willing to do that then you can fully customize the drop down menu.

However I find this greatly annoying every time I've encountered it. If you can't emulate the select element with grace just don't do it at all. Case in point: Tom's Hardware. I can't stand their drop down because it always closes when I don't want it to and when I know a normal select element wouldn't.

I have (greatly) reworked an input checkbox element script for Version 2.9 of my site and even as detailed as I have gotten it the styling is a little off in older versions of IE. However if you're absolutely willing to go through the frustration go for it. It's a challenge and while I won't say don't do it at all...I will say it again, don't do it unless you're willing to go to the point of making sure it absolutely emulates the select element both with the mouse and the Keyboard. People who disable JavaScript know they have disabled JavaScript.

I'll subscribe so if you want my help I'll be glad to do what I can. :)

Image

Re: Styling select elements

Posted: Sat Jun 13, 2009 5:53 pm
by allspiritseve
JAB Creations wrote:Styling a select element isn't going to get more custom then you will find on my site's Music Player.
I need more custom than css can give me, which means replacing the dropdown with a list. I don't know, maybe the problem is more complicated than I'm thinking and I should just use some sort of jQuery plugin. Your point about the keyboard stuff is well taken.

Re: Styling select elements

Posted: Sat Jun 13, 2009 6:05 pm
by JAB Creations
Ah! No! NO! Throw your thoughts of jQuery out the door right there! Don't get me wrong I love jQuery but I will never rely on a third party module when I know I can write something myself without a 40KB third party module dependency knowing full well keeping it updated in the future could eventually break something I wrote explicitly for it.

As far as a an ordered or unordered list I think that would either over-complicate things or work out nicely...

I'm not really sure at the moment though I would personally approach it using divisible elements.

What exactly would you like to do style wise? Talking about the journey won't matter unless you know what your destination is. :wink:

Re: Styling select elements

Posted: Sat Jun 13, 2009 8:53 pm
by allspiritseve
JAB Creations wrote:Ah! No! NO! Throw your thoughts of jQuery out the door right there! Don't get me wrong I love jQuery but I will never rely on a third party module when I know I can write something myself without a 40KB third party module dependency knowing full well keeping it updated in the future could eventually break something I wrote explicitly for it.
1. For many of the well-supported jQuery plugins, browser support is at a level much higher than I can achieve on my own. I simply don't have the time or capability to check all necessary browsers and versions to make sure my code is working properly. I check in firefox, opera, and IE6, 7, and 8, but using code that has been tested for me makes my life easier.
2. We are already using jQuery for other parts of the application, so it is not an added dependency.
JAB Creations wrote:As far as a an ordered or unordered list I think that would either over-complicate things or work out nicely...
There is little you can do to style a select element. Something else has to be used. Though I still want the original select element to be part of the markup so that it degrades gracefully.
JAB Creations wrote:What exactly would you like to do style wise? Talking about the journey won't matter unless you know what your destination is. :wink:
The customer has supplied me with a graphically drawn dropdown menu that is simply impossible to style using CSS alone.

Re: Styling select elements

Posted: Sat Jun 13, 2009 9:09 pm
by JAB Creations
Well there are several approaches to the situation in general...

If you accept the task from the client...
1.) You can do it with jQuery though I won't help you with jQuery specific code (though I will help with non-jQuery code is some is involved).

2.) You can do it without jQuery and I'll help you out as much as I can.

...or you can opt out of doing the project for technical and time related reasons. Really it's up to you because it's your client. Any experienced web designer knows that there is only so much you can do with CSS in regards to form elements. So basically I think you should figure out a way to explain the technical issues of the scenario. If it was a client of mine I would probably explain it as adding cylinders to an engine doesn't mean adding them but removing the entire engine altogether and then replacing it with a completely different engine due to the limitations of the technology involved. I would also say that I would be willing to do the work though because it's beyond the current limitations in the traditional sense of how such things are approached that it will be a premium feature that I would have to charge more for since you're talking about emulating an existing feature just for extra styling. If the client is not the type to understand and gets all upset then it starts running towards issues like is this the only paying client we have and other related economical questions.

I'm not sure about the specific requirements though in general I think the code would start to look something like this...

Conceptual

Code: Select all

<div id="selector"><div><a href="#" id="item_0" onfocus="select_focus();">item 0</a></div><div id="menu"><div><a href="#" id="item_1">item 1</a></div><div><a href="#" id="item_2" onblur="select_blur();">item 2</a></div></div><!-- /#menu --></div><!-- /#selector -->
You'd probably have to add an onmouseover and onmouseout events to #selector.

As far as CSS is concerned set the height of #selector to something like 20px. You'll likely have to find the position of the selector and calculate the absolute positioning of the #menu id to make sure if you have content below the emulated select element that it is not pushed downwards.

Be prepared to mess with JScript, why we're still forced to use a JavaScript engine with minor modifications from summer 2000 is beyond me.

*EDIT* - Also consider that you'll likely want to at some point have support for multiple custom select elements so using the id's as parameters is a very likely approach I would implement in such a setup.

Re: Styling select elements

Posted: Sat Jun 13, 2009 10:00 pm
by allspiritseve
JAB Creations wrote:If you accept the task from the client...
1.) You can do it with jQuery though I won't help you with jQuery specific code (though I will help with non-jQuery code is some is involved).
I've already accepted the task, and money is not an issue anyways. They understand it's going to take more time to implement a custom-skinned select element.

I appreciate you taking the time to write that long post. I am fairly certain I know how to do it, I was just hoping there was a tested, working example of some simple code that would do it. If not, there are many complex, ready made solutions out there I have come across that can do the same thing.

Re: Styling select elements

Posted: Sat Jun 13, 2009 10:14 pm
by JAB Creations
I've done it with custom check boxes with the only modern exception being WebKit (Safari, Chrome, and OmniWeb) won't tab to the anchors that have the background-image though WebKit has never really put a major emphasis on accessibility.

I think the only really sophisticated part will be adding support for up, down, end, and home keyboard keys (not sure offhand is page up and page down actually do anything) though it could potentially be simpler. Here are a couple of pages I use for keyboard event references...
http://www.htmlgoodies.com/beyond/javas ... hp/3471141
http://www.cambiaresearch.com/c4/702b8c ... Codes.aspx

A note: I think some of the key codes either on one of these two pages (or a different tutorial altogether) may be wrong so test the feature if you implement it.

I personally plan on replicating my checkbox script for radio buttons, then eventually scrollbars. Styling select element is further down on my list. I personally think the nitty gritty things are what will really need attention in CSS4...too bad CSS3 is taking forever. :roll:

If I can think of anything else I'll let you know. I'm only familiar with jQuery's code for animations and only by copy and paste references. :mrgreen: Do you plan on posting this in the critique forum eventually?

Re: Styling select elements

Posted: Sun Jun 14, 2009 11:41 am
by kaszu

Re: Styling select elements

Posted: Sun Jun 14, 2009 2:12 pm
by Weirdan
JAB Creations wrote:I think the only really sophisticated part will be adding support for up, down, end, and home keyboard keys (not sure offhand is page up and page down actually do anything) though it could potentially be simpler.
You forgot alphanumeric keys - they act as a quick search in a standard select box

Re: Styling select elements

Posted: Sun Jun 14, 2009 2:15 pm
by JAB Creations
Weirdan wrote:You forgot alphanumeric keys - they act as a quick search in a standard select box
I forgot when I posted and you're right, it's actually one of my favorite features in XP. I'm working on the translation pages now and I have to set the meta language (which there are like a hundred various options) so when I want Russian I'll select the select element and press the key 'r' until Russia comes up. :)