Tweak the default alignment of input[type="range"]

[tomayac]

The alignment of input[type="range"] looks a bit off by default, and to make it look nicer, one has to apply vertical-align: middle to the hosting element:

Could maybe the default alignment of input[type="range"] be changed, so that authors don't have to make this tweak in CSS?

(Live demo courtesy of @simevidas. Issue filed by encouragement from @zcorpan.)

[Stranicola97]

Hello
is this request still open?

Nicola

[zcorpan]

So both are inline-blocks that are baseline-aligned, but the range control has no text in it.

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/10060

Interestingly, Firefox has different alignment compared to Chrome and Safari for empty buttons. I'm not sure if the alignment of empty buttons needs some magic that is not currently defined in the spec (https://html.spec.whatwg.org/multipage/rendering.html#button-layout-2)...

I don't think it's possible to switch all controls to vertical-align: middle due to web compat, and I don't know if there's any other solution to aligning form controls to make it "look nicer" and still work for any size of button, for example.

[simevidas]

Could the meaning of baseline alignment for range inputs be changed so that the visible track directly sits on the baseline? Like so:

That might even be the ideal vertical alignment for this control.

[zcorpan]

I suppose it could, however...

When looking at all widgets, I noticed that meter and progress are similar, but they have a default UA style of vertical-align: -0.2em! input type=range doesn't.

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/10061

That seems like a possible fix? At least in Chrome and Safari it looks like an improvement, though it might not be perfectly aligned. The meter and progress elements also don't have the bottom of the rail touching the text baseline (but the appearance differs between browsers).

cc @josepharhar @mfreed7 this issue may be relevant for web-platform-tests/interop#11