Styling a <select>?

[Anastasia Cheetham]

Colin, thanks for your input!

On 20-Oct-09, at 9:43 AM, Colin Clark wrote:

> At least in my experience, trying to style dropdowns with CSS  
> doesn't work reliably. Looking at Erin's wireframes, though, there's  
> no behaviour specified here that isn't already provided by an out of  
> the box <select> elemen. It's worth exploring whether we really need  
> to create a custom style for this.

I don't see any non-standard behaviour, either. I think the checkbox  
next to the selected item was the one concern I had. Default styling  
for a regular <select> doesn't include any such thing, and I'm not CSS  
savvy enough to know if it's simple or impossible to add it - so I  
asked the experts :-)

> If the styling is essential, or if there's custom behaviour I'm  
> missing, the next step is probably the jQuery dropdown plugin we use  
> for Inline Edit. It's pretty raw, and recent upgrades of it seem to  
> have regressed. Might be an opportunity to replace it with something  
> a little more awesome.

Yes, our current drop-down implementation has weaknesses already. I've  
been considering options for implementing something new. One  
suggestion I received from Eli was to use an ordered list:

> Most folks who style selects, don't; they replace the actual select  
> with a styled ordered list (or other HTML structure) and then add  
> the interaction with Javascript and/or CSS hovers.

-- 
Anastasia Cheetham                       a.cheetham at utoronto.ca
Interface Developer, Fluid Project      http://fluidproject.org
Adaptive Technology Resource Centre   /   University of Toronto