Číselné inputy (<input type="number">) mají v prohlížečích vestavěné šipky pro zvyšování a snižování hodnoty. Tyto šipky se často nehodí do designu a je potřeba je odstranit nebo upravit.

Zobrazení v Chrome:

Zobrazení v Safari:

V jiných prohlížečích a operačních systémech mohou vypadat jinak. Třeba v mobilech s iOS nejsou vůbec.

Bohužel tyto šipky nejdou spolehlivě a napříč prohlížeči stylovat.

Co s tím?

1. Vykašlat se na to. Smířit se s tím, že vzhled a chování nebude konsistentní.
2. Zrušit tyto šipky úplně.
3. Vytvořit si vlastní ovládací tlačítka

Odstranění tlačítek

Pro kompletní odstranění šipek:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}

Tento kód funguje ve všech prohlížečích založených na WebKitu (Chrome, Safari, Edge). Druhá část je potom pro Firefox.

Vlastní stylování tlačítek

Protože výchozí tlačítka stylovat nejdou, jediné řešení je si vytvořit vlastní tlačítka a JavaScriptem jim dodat požadované chování.

Díky použití JS je chování plně pod kontrolou. Je potom k úvaze, jestli rovnou i neupravit logiku +/− tlačítek.

Výchozí šipky v prohlížečích zvětšují/zmenšují číslo dle atributu step. To se často vůbec nehodí, protože může být žádoucí umožnit skákat třeba o 1, ale zároveň umožnit zadat do pole 0,1 – step="1" tomu zabrání.

Praktické příklady

Kromě spinner tlačítek je možné políčko stylovat standardně jako jakýkoliv textový <input>.

Je tu ještě trochu záludnost s různou šířkou dle min/max atributů.

Minimalistický design

Moderní design s gradientem

Omezení a validace

Číselné inputy podporují několik atributů pro omezení hodnot:

<input type="number" min="0" max="100" step="1" value="50">

• min – minimální hodnota
• max – maximální hodnota
• step – krok pro šipky (1 pro celá čísla, 0.1 pro desetinná)
• value – výchozí hodnota

Stylování podle validace

CSS poskytuje pseudo-třídy :valid a :invalid pro stylování <input>ů podle toho, jestli jsou (ne)validní:

Responsivní design

Pro mobilní zařízení je dobré dodržet, aby velikost textu byla alespoň 16 pixelů, což předejde tomu, aby se po kliknutí do políčka na mobilech zoomovala stránka.

Závěr

Stylovat tlačítka pro změnu stepu políčka prakticky nejde. Je třeba zvážit dle situace, jestli se vyplatí dělat vlastní JS řešení, smířit se s nekonsistencí nebo je úplně schovat.