Handle custom input size with CSS to fix different behaviour across browsers

[adamkudrna]

Problem

It seems that implementation of input size attribute differs across browsers: inputs are narrower in Chrome than in Firefox and Safari:

↑ Input with size of 16, Chrome.

↑ The same field in Firefox.

This is probably caused by vague specification of HTML.

Suggested Solution

There is probably no pure HTML + CSS solution, CSS cannot apply the value of size attribute anywhere else than in content.

However, we can take the value of inputSize and pass it to CSS through a custom property. Setting a width should then be as easy as this:

width: calc(1ch * var(--rui-local-input-size));

Or probably more purely:

width: var(--rui-local-input-size);