You don't. Form elements were never really meant to be styled. That's why there are so hard to style and get a consistent look across all browsers. Of course, that doesn't stop people, so all sorts of hack are employed, many include javascript that actually replaces the native element with a jumble of html elements to re-create the designer's holy vision.

It just seems like it ends up making these useful for utility stuff, but will just get ignored for most real projects. It's 2013, the idea that anything should not be able to be styled is ignoring the real world.

No, having identifiable form elements is freaking important, computers are hard enough for a novice to learn without the basic idioms change shape and meaning because designers want to get creative.

The real world needs consistent form inputs.

Also. Damn you firefox, Implement the bloody date input.

You use a JavaScript polyfill which handles browsers which don't yet support them. For example, I recently launched a project using <input type=range> with a [modernizr.load](http://modernizr.com/docs/#load) test which uses https://github.com/freqdec/fd-slider if the browser doesn't have native support.

As for styling the native controls, I generally recommend thinking twice about that as the usability benefits of having a familiar standard control are significant but you should read up on the Shadow DOM and the emerging CSS support for it: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom&#x...;

Unsupported input types default to input type="text", so you can just use a JS polyfill that detects the returned input field and acts accordingly.