Jak nastylovat formulářové prvky pomocí CSS

2.3.2015

Stylování formulářových prvků je pro hodně webmasterů bolavé místo. Nastylovat jde sice všechno, ale v mnoha případech se člověk neobejde bez JavaScriptu. CSS3 sice (víceméně) neumožňuje přímo stylovat formulářové prvky, nicméně poskytuje nám nástroje, jak tento problém vyřešit bez zbytečných skriptů.

Jak nastylovat checkbox a radiobutton jenom pomocí CSS

caniuse.com Funguje ve všech prohlížečích kromě IE8 a nižších.

Pro nastylování checkboxu a radiobuttonu využijeme provázanost mezi prvky input a label pomocí atributu for. Když tedy kliknu na popisek propojený s inputem, input se zaškrtne/odškrtne. Této vlastnosti se využívá k tomu, že nastyluji pouze popisek a samotný input schovám, přesto však zůstane zachována funkčnost.

Druhou využitou věcí je pseudoselektor :checked, spolu se selektorem následujícího sourozence + (nebo selektorem obecného sourozence ~). Pomocí těchto selektorů totiž můžu stylovat jenom ten label, který následuje za zaškrtnutým/nezaškrtnutým checkboxem.

Pro nastylování je dobré mít připravený sprite s jednotlivými stavy checkboxu. Stačí mít vzhled stavů checked a unchecked, případně disabled, pokud však berete ohled na přístupnost, bude se vám hodit také focus.

<!-- provázání inputu s labelem -->
<input type="checkbox" id="podminky" />
<label for="podminky">Souhlasím s obchodními podmínkami</label>

<label for="podminky">Souhlasím s obchodními podmínkami</label>

/* pro prohlížeče, které to umí, schovám checkbox
 * a nepoužiju display:none, ani visibility:hidden, 
 * protože by pak nebyl přístupný pro uživatele čteček
 */
input:not(:checked),
input:checked                { position:absolute; left:-9999px; top:0px; }

/* obrázek na pozadí pro oba stavy checkboxu */
input:not(:checked) + label,
input:checked + label        { background:transparent url('checkbox.png') no-repeat left top; padding-left:20px; }

/* posunutí pozadí obrázku, když je checkbox zaškrtnutý */
input:checked + label        { background-position:0 -20px; }

/* pro prohlížeče, které to umí, schovám checkbox

* a nepoužiju display:none, ani visibility:hidden,

* protože by pak nebyl přístupný pro uživatele čteček

input:not(:checked),

input:checked { position:absolute; left:-9999px; top:0px; }

/* obrázek na pozadí pro oba stavy checkboxu */

input:not(:checked) + label,

input:checked + label { background:transparent url('checkbox.png') no-repeat left top; padding-left:20px; }

/* posunutí pozadí obrázku, když je checkbox zaškrtnutý */

input:checked + label { background-position:0 -20px; }

Tento postup funguje v Internet Exploreru verze 9 a vyšších a ostatních moderních prohlížečích.

Jak nastylovat select pouze pomocí CSS

Při stylování formulářového prvku select můžeme použít dva různé přístupy. Jeden spočívá v přidání obalovacího prvku (wrapperu), kterým schováme rozbalovací šipku selectu a jeho nastylováním zobrazíme vlastní. Druhý využívá nestandardní CSS vlastnost appearance.

Oba přístupy nabízejí možnost nastylovat select, nicméně prvky option pomocí CSS zcela nastylovat nejde, pouze částečně a jenom v některých prohlížečích.

Výhodou prvního způsobu je funkčnost v naprosté většině prohlížečů a nevýhodou je to, že option vypadá širší než samotný select. Druhý způsob zase nevyžaduje žádný přebytečný HTML kód, nefunguje ale v žádné verzi Internet Exploreru.

Stylování selectu pomocí wrapperu

Funguje ve všech moderních prohlížečích.

Vytvořím select a jeho wrapper:

<div class="custom-select">
    <select>
        <option>první</option>
        <option>druhá</option>
    </select>
</div>

<option>první</option>

<option>druhá</option>

</select>

</div>

Nastavím překrývání selectu obalovacím divem a ten nastyluji:

/* nastavím wrapperu menší šířku, než má select, aby ho překryl */
.custom-select        { width:150px; overflow:hidden; }
/* vyresetuji defaultní vzhled selectu a nastavím mu šířku */
.custom-select select { background:transparent; border:none; width:200px; }

/* nastyluji select a wrapper */
.custom-select select { color:#fff; }
.custom-select        { background:black url("http://i.imgur.com/5QfwU29.png") no-repeat 130px center; }

/* nastavím wrapperu menší šířku, než má select, aby ho překryl */

.custom-select { width:150px; overflow:hidden; }

/* vyresetuji defaultní vzhled selectu a nastavím mu šířku */

.custom-select select { background:transparent; border:none; width:200px; }

/* nastyluji select a wrapper */

.custom-select select { color:#fff; }

.custom-select { background:black url("http://i.imgur.com/5QfwU29.png") no-repeat 130px center; }

A takhle to pak vypadá:

Poznámky ke stylování selectu pomocí wrapperu:

Stejně jako u stylování checkboxů je dobré si připravit design více stavů selectu, tedy navíc disabled a readonly, focus, případně active.
V Chrome options nedědí barvu pozadí selectu, pokud používám světlé písmo na tmavém pozadí, tak nebude vidět.
Firefox u aktivního selectu zobrazuje ohraničení přerušovanou čarou. Má barvu písma a dá se jí zbavit trochu krkolomným způsobem – písmo nastavit průhledné se stínem, který má barvu původního textu.

select:-moz-focusring { color:transparent; text-shadow: 0 0 0 #666; }

1

select:-moz-focusring { color:transparent; text-shadow: 0 0 0 #666; }

Stylování selectu využitím CSS vlastnosti appearance

caniuse.com Nefunguje v žádném Internet Exploreru (ani mobilním), v Opeře mini a starších Operách.

Appearance je nestandardní CSS vlastnost, pomocí které se dá elementům nastavit vzhled různých formulářových prvků. Pro nastylování selectu použijeme hodnotu none. Ta u selectu zabrání vykreslení defaultního vzhledu, tedy hlavně rozbalovací šipky vpravo, což nám umožní nastylovat select podle potřeby.

Jako nestandardní vlastnost je potřeba appearance používat s vendor prefixem.

<!-- html příkladu -->
<select class="custom">
        <option>první</option>
        <option>druhá</option>
</select>

<option>první</option>

<option>druhá</option>

</select>

/* zruším defaultní vzhled */
select.custom   { -moz-appearance:none; -webkit-appearance:none; appearance:none; }

/* nastyluji select dle potřeby */
select.custom   { border:none; border-radius:5px; cursor:pointer; width:150px; padding:4px 8px; }
select.custom   { background:#c9c9c9 url('http://i.imgur.com/5QfwU29.png') no-repeat 130px center; }

/* hack pro IE8 */
select.custom   { background:#c9c9c9\9; height:auto\9; } 

/* hack pro IE9-IE11 */
@media screen and (min-width: 0\0) { 
    select.custom { border-radius:0; background:#fff; } 
}

/* zruším defaultní vzhled */

select.custom { -moz-appearance:none; -webkit-appearance:none; appearance:none; }

/* nastyluji select dle potřeby */

select.custom { border:none; border-radius:5px; cursor:pointer; width:150px; padding:4px 8px; }

select.custom { background:#c9c9c9 url('http://i.imgur.com/5QfwU29.png') no-repeat 130px center; }

/* hack pro IE8 */

select.custom { background:#c9c9c9\9; height:auto\9; }

/* hack pro IE9-IE11 */

@media screen and (min-width: 0\0) {

select.custom { border-radius:0; background:#fff; }

}