Brian M. Blakely, 2013-09-21 02:03 (Europe/Helsinki):
I was contemplating whether to propose a new input type, or an
attribute valid only for checkboxes. But it isn't a checkbox, so I
went with a new type value. You can choose to slide the switch or
click it in most OS implementations, so even the behavior is
different from a checkbox.
I agree that the look and feel is different from checkbox but all the
differences seem to be purely presentational. If you disagree, you need
to elaborate a bit more.
I'd suggest pursuing something along the lines
input[type="checkbox"].switch
{
appearance: lightswitch;
}
instead. That way you could use CSS media queries and use "lightswitch"
appearance for narrow viewports and regular checkboxes for wider viewports.
However, if you're requesting for more featured switch seen in e.g.
newer Android applications where the switch has embedded text labels to
declare the switch positions, there might be need for a new markup.
An example of such UI in ASCII graphics:
+----+---------------+
| °C |========== °F =| Temperature unit
+----+---------------+
(That is, a label "Temperature unit" with a switch with labels "degree
Celcius" and "degree Fahrenheit". In the real UI the label is on the
left and switch is aligned to right margin but I put it this way to have
a slightly better change for ASCII graphics to work correctly.)
I personally hate this UI and would much prefer using two radio buttons
for this. Still, this is a native UI concept on this platform and I see
no reasonable way to convert a real HTML radio button group into this
using just CSS. The closest thing is allowing to allow rendering a
<select> element with just options with a "lightswitch" appearance.
--
Mikko
