[whatwg] Controlling the UI on <input type=date>

brenton strine whatwg at gmail.com
Thu Dec 6 12:46:37 PST 2012


It is currently difficult to control the visibility of the UI (e.g. little
arrows, spinners, etc) on new input types like datetime, number, range,
color, etc.

It seems that many developers want to use the semantic attributes, but need
to be able to hide the little arrows for various reasons, and so they are
sticking with type=text (e.g. http://stackoverflow.com/q/11418289/925897

).

Reasons developers might want to control the visibility of the UI:
- developer has built their own datepicker/numberfinder/colorpicker/etc
- developer wants to display just the values (as if it were type=text) upon
printing, or when readonly, or when not active

As browsers add support, there will likely be ways to control this using
vendor-specific CSS, but not only will this vary from browser to browser,
it will vary among the different input types. For example, in Chrome it is
currently possible to hide the slider arrows on the number input:

input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
}

This kind of code is clearly going to be very difficult to maintain and
keep up to date. I don't think a CSS solution is going to work. Has there
been discussion here on an input attribute that controls the UI? Perhaps
something like this:

<input type="date" ui="false">


More information about the whatwg mailing list