[css-ui] Appearance switching

I'm responsible for form control implementation of Google Chrome. Florian
and I discussed appearance switching [1], and this is a comment on ISSUE 27
[2].

Goals of appearance switching are:
  - Enable web authors to style form controls.
  - Appearance:none should not make form controls unusable.
  - Replacing -webkit-appearance:none with appearance:none should not break
existing pages.


Current thoughts on each of form controls:

* <button>
   Current behavior: -webkit-appearance:none shows CSS-rendered button with
the element content.
   We don't need to change this behavior.

* <meter> and <progress>
   Current behavior: -webkit-appearance:none doesn't work now.
   Because these elements have fallback content, rendering the fallback
content in usual CSS is reasonable.  The element usage is still very low,
and changing behavior is acceptable.

* Popup-menu <select>.
   Current behavior: -webkit-appearanace:none removes native-like widget
rendering and dropdown indicator arrow ▼.
   The current behavior is ok.  It should show selected OPTION value as
ever.  It's hard to reproduce it only with CSS.

* <input> type=submit, reset, button
   Current behavior: -webkit-appearance:none shows CSS-rendered button with
button labels.
   The current behavior is ok.  CSS can't reproduce the behavior in a case
of no 'value' content attribute. e.g. <input type=submit>

* <input> type=checkbox, radio
   Current behavior: These types are not rendered at all with
-webkit-appearance:none.
   This behavior should be changed.  We should provide basic UI behavior.
   Firefox provide a simpler rendering with -moz-appearance:none.

* <input> type=text, tel, url, email, and <textarea>
   Current behavior: -webkit-appearance:none just switches border rendering
to CSS-rendered border.
    The current behavior is ok.  We should not stop showing editing text.

* <input> type=search
   Current behavior: -webkit-appearance:none just switches border rendering
to CSS-rendered border.  Clear button remains.
   The clear button is an optional UI widget, and Firefox doesn't have it.
We may remove it by appearance:none.

* <input> type=number
   Current behavior: -webkit-appearance:none just switches border rendering
to CSS-rendered border.  Spin button remains.  -moz-appearance:none has the
same behavior.
   The spin button is an optional UI widget.  We may remove it by
appearance:none. However, removing it is not compatible with the current
behavior.  We need to check if the behavior change won't break many pages.

* <input> type=date, datetime-local, month, time, week
    Desktop Google Chrome / Opera and other UAs have different UIs for these
types.  The latter renders them as buttons to trigger native pickers.  So
appearance:none should work same as type=submit, reset, and button.

   ** Desktop Google Chrome and Opera:
     Current behavior: -webkit-appearance:none just switch border rendering
to CSS-rendered border.  Spin button, clear button, and picker indicator
arrow remain.
   - As for the clear button, we may remove it.  It's same as type=search
   - As for the spin button, it's similar to type=number.  However it's hard
to recreate this spin button even by JavaScript and CSS.
   - As for the picker indicator arrow, it's almost non-optional UI widget.
It's possible for users to put a date/time by keyboard operations without a
built-in picker.  However the built-in picker is a major benefit of these
input types.  Also, changing this behavior might break existing pages.

* <input> type=range
   Current behavior: -webkit-appearance:none removes rendering of slider
track.  Native-rendering of slider thumb remains.
   The slider thumb should work even with appearance:none.  However web
authors don't have a standardized way to style it.  We should standardize a
pseudo element for the slider thumb.

* <input> type=color
   Current behavior: -webkit-appearance:none shows CSS-rendered button with
selected color box.
   The role of the selected color box is same as the selected OPTION label
in a SELECT element.  CSS can't recreate it.  So, probably the current
behavior is ok.

* <input> type=file
   Current behavior: -webkit-appearance:none does nothing.
   CSS can't recreate the selected file name.  [Choose File] button is an
optional UI widget.  We may remove the button by appearance:none.


Summary:
* If rendering child nodes is reasonable, we should do so.
     <button>, <meter>, <progress>
     Not applied: <select> and <textarea> though they have child nodes.
* Optional UI widgets should be removed
* Text or color showing current value should not be removed.
* Need to standardize some pseudo elements to style everything.


[1] https://drafts.csswg.org/css-ui-4/#appearance-switching

[2] https://drafts.csswg.org/css-ui-4/#issue-5b8a5418


-- 
TAMURA, Kent
Software Engineer, Google