Stupid Select Boxes CSS with HTML

This site is best viewed in a modern browser with JavaScript enabled.

Webnerd

You would think by now that browsers had a cool way to handle styling the <select> box. No.

We use creative CSS hacks and plugins like Chosen to get the job done. I am quite tired of throwing in 3-rd party implementations and dealing with this crap!

20 years in web development and we still write custom code to make select boxes work better and for client needs.

Clients want stylized select lists, end of story. Let's fix the damn problem with this for once with CSS instead of whacked out Javascript plugins.

deathshadow

How about instead we educate clients about accessibility instead of the flash over substance goofy graphical bull that just makes sites harder to use -- or worse, dropdowns with so many values in them it leaves me screaming at the display "for **** sake, just let me type it in!" -- whatever happened to "If you have more than 12 options, don't use a select it's just going to piss people off!" that was floating around a decade ago?

MIND YOU, I agree -- IF we're going to style them, CSS should be the tool and right now, the state of styling SELECT in CSS is a JOKE. Don't expect that to be fixed though with the Mozilla crowd having their heads wedged up their backside about form element handling, much less the webkit nutters shoving all sorts of goofy styles down our throats on form elements.

Though, I laugh at how often I see people using SELECT outside of forms for non-form operations like going to subpages; serious herpaderp since that's just a dropdown menu filled with anchor's job.

Mr_Initial_Man

Well, what if you had a lot of very specific terms--I know you hate this page anyways (I'm rather proud of it), but http://www.mrinitialman.com/Library/HTML/Extras/Colours/hsl.xhtml and http://www.mrinitialman.com/Library/HTML/Extras/Colours/rgb_hex.html have select boxes with I think around 100 or so options--all the CSS colour names.

deathshadow

See, that select is an example of using a form element for a non-form action -- I'd probably have written that as a bunch of anchors, and if I wanted drop-down behavior I'd have used CSS to do it... Though I'd probably on such a page have a server-side handler for the changing of values should scripting be unavailable; but that's because I'm a firm believer in graceful degradation. It's really not a 'form' action so why use form elements to do it? (I ask this a LOT when it comes to JavaScript..)

... and I don't "hate" those pages. I love the concept, it's the execution that could use some help... and as we discussed, I'd probably not use SVG for that, or if I did I'd find a way to make it a bit more... responsive. Controlling it is very awkward and slow.

Like your Hue and Lightness sections I'd have a linear-gradient instead of the boxes, and trap the mouse position on mouse-down in realtime with mousemove instead of single-fire clicks. Same for the rotating box where I'd use arctan2 to translate the mouse position into an angle.

But then, I'm the nutter who uses arctangents to do 3d projection instead of sin/cos and/or matrixes. Explain to me again how 64 multiplies of three sin and three cos is 'faster' than two arctangents? NOT that I'm saying the entire world of 3d computer graphics is doing it wrong... not at all.

Mr_Initial_Man

If/when I redo that book, I'll probably take your advice. I've never liked the idea of creating a webpage from JavaScript, but to quote you (hopefully in context)

deathshadow;1339465 wrote:
That said, you've built an application, not a website -- and there is a difference.

I guess that does bend the rules a bit.