Různá šířka <input type=number> s min/max

I přes značné posuny je stylování HTML formulářů stále jednou z největších výzev.

Do hry zde vstupují výchozí styly prohlížeče a operačního systému.

Jedna taková specialita je různá šířka číselného pole.

Prohlížeč se snaží podle omezeného rozmezí čísel chytře určovat šířku <input>u.

Může to způsobovat dost divné stavy, když se právě atributy min a max používají pro validaci na straně klienta.

Zvlášť v případě, kdy jsou dynamické, může docházet k nepěknému poskakování.

Jak je vidět na ukázce, v závislosti na minimální/maximální hodnotě prohlížeč přizpůsobuje šířku políčka.

Samostatná živá ukázka

Dělá to pouze při vyplnění obou atributů.

Řešení

Bohužel 100% universální a uspokojivé řešení neznám.

V některých případech to nemusí vadit.

Ono obecně nastavovat šířku políčka podle očekávaného obsahu je rozumné pro lepší pochopení formuláře ze strany uživatele.

Vadí-li to, asi nejsnazší je nastavit políčku pevnou šířku (width).

Výchozí šířka <input>u je ale proměnlivá napříč prohlížeči. Pro stejnou šířku s textovými políčky (<input type=text>) je tak potřeba explicitně nastavit šířku i pro ně.

V macOS pozoruji následující výchozí rozměry textových políček:

• Safari – 148 × 19 px
• Chrome, Edge, Brave – 153 × 21 px
• Firefox – 189 × 21 px

Dostupná šířka

Cesta k sjednocení může být i nastavení šířky na dostupnou a následné omezení, aby políčko nebylo zbytečně široké.

input {
    width: -webkit-fill-available;
    max-width: 8ch;
}

Jednotka ch zde representuje šířku číslice 0 v aktuálním fontu políčka. Jde tak přibližně docílit šířky dle očekávaného počtu číslic.

Atribut size totiž u číselného políčka nic nedělá.

Šířka podle obsahu

Docela zajímavá je vlastnost field-sizing: content, kdy se šířka obsahu přizpůsobuje šířce obsahu.

Může to jít hezky zkombinovat s minimální šířkou. Ale funguje jen v Chrome.

input {
    field-sizing: content;
    min-width: 8ch;
}

Odkazy

• StackOverflow: input number max attribute resizes field
• MDN: field-sizing