3 ms·

The problem with these inputs is how do you style them or customize the UX? For example, how do you style an element that is a color swatch on some browsers an

The problem with these inputs is how do you style them or customize the UX? For example, how do you style an element that is a color swatch on some browsers and a text field on others?

kmfrk 13y ago
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.
dsego 13y ago
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.
- smackfu 13y ago
  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.
  - GhotiFish 13y ago
    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.
acdha 13y ago
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 http://modernizr.com/docs/#load) test which uses https://github.com/freqdec/fd-slider 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&#x2F http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom&#x...;

The problem with these inputs is how do you style them or customize the UX? For example, how do you style an element that is a color swatch on some browsers and a text field on others?

kmfrk 13y ago

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.

dsego 13y ago

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.

smackfu 13y ago
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.
- GhotiFish 13y ago
  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.

acdha 13y ago

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 http://modernizr.com/docs/#load) test which uses https://github.com/freqdec/fd-slider 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&#x2F http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom&#x...;