Stylování formulářových prvků

Formulářové prvky mají ve všech prohlížečích předdefinovaný styl (podle OS) a je obtížné je změnit. Přitom požadavek na změnu vzhledu formulářů je jeden z nejčastějších při vývoji RIA (Rich Internet Application) nebo PWA (Progressive Web App).

File input

Prvek pro nahrání souboru je jeden z nejobtížněji stylovatelných. Přesněji řečeno ve většině prohlížečů se vůbec stylovat nedá, vyjma rozměrů a některých vlastností, které vzhled přímo neovlivňují a jen mění, jak a kde se ve stránce vykreslí.

Toho se dá ale využít společně s faktem, že label (popisek) přiřazený prvky vždy vyvolá focus propojeného prvku. Pokud tedy skryjete samotný formulářový prvek pro upload a následně k němu připojíte label, budete ho moci dle libosti stylovat a zachováte možnost soubor vybrat a nahrát.

Jedinou nevýhodou je to, že formulářový prvek nemůžete úplně skrýt (display: none), protože by přestal fungovat. Skrytí ale lze dosáhnout právě pomocí CSS vlastností, které prvek vizuálně skryjí před uživateli, ale zároveň zachovají jeho funkčnost.

<label for=upload>
    <input type=file id=upload>
<label>

Je jedno, jestli input vložíte do labelu nebo někam jinam. Tenhle zápis je ale z hlediska organizace HTML zpravidla nejlepší (při debuggování stačí najít label a víte, že input je v něm).

label[for=upload] {
    //... libovolný styl, jak je potřeba
}
input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Nejjednodušší metoda skrytí prvku by byla nastavení absolutního pozicování a posunutí někam hodně daleko pryč. Nevýhodou tohoto řešení je, že prohlížeč musí vytvořit dostatečně velkou stránku, aby posun pojmul, což ho zbytečně zatěžuje.

Další řešení je nastavit viditelnost nebo průhlednost, což také prvek skryje. Problém ale je, že některé prohlížeče mohou neviditelný nebo zcela průhledný prvek považovat za skrytý a vypnout ho.

Nejlepší řešení je tedy využít vlastnost clip: rect(), která prohlížeči říká, která část prvku se má vykreslit. Pokud zadáte samé nuly, znamená to, že prvek se nezobrazí vůbec. Vlastnost clip ale funguje tak, že prvek nejprve celý vykreslí (takže bude fungovat), a pak teprve vybere, kterou část vykreslí (a když řekneme, že žádnou, prostě ho nechá skrytý, ale funkční.

Vlastnost clip podporují prakticky všechny prohlížeče, vyjma IE7, Opera 6 a starších.

Select

Select (seznam) můžete celkem dobře stylovat ve většině prohlížečů s drobnými rozdíly a nedostatky.

U selectu vždy používejte vlastní prvek místo abyste ho nahrazovali nějakým vlastním inputem s rozbalovacím menu. U klasického selectu totiž dokáží mobilní zařízení zobrazit vlastní implementaci, která zabrání např. vytečení seznamu z obrazu a usnadňují výběr pomocí dotykového ovládání.

Pokud chcete stylovat položky v rozbaleném seznamu, musíte některé styly nastavit celému selectu a některé jen jeho option.

Pokud chcete vycentrovat text selectu, nefunguje na to vlastnost text-align, ale text-align-last, která je podporována od IE 5.5 a všech ostatních prohlížečích kromě Safari.

Pro další odsazení textu pak můžete normálně použít padding, ale je potřeba pamatovat na to, že se do něj nepočítá ikona šipky a proto je vždy potřeba nechat vpravo větší okraj:

select {
    /* nastavíme odsazení textu a zajistíme,
       aby text nelezl do ikony (16px) */
    padding: 2px 20px 2px 4px;
}

Rozbalený seznam automaticky přebírá levý padding selektu, takže zobrazí položky stejně odsazené.

Jednotlivé option můžete v seznamu vypnout (disable), takže pak nepůjdou vybrat, nebo je můžete úplně skrýt (display: none). Skryté option jdou stále nastavit programově, takže můžete do selectu vybrat hodnotu, která v seznamu není vidět. Např. můžete takto doplnit text pro prázdnou hodnotu:

    select > option[value=''] {
        /* prázdná hodnota půjde vyplnit 
           programově, zobrazí svůj text,
           ale uživatel ji vybrat nemůže */
        display: none;
    }

 

Pokud potřebujete selekt nastylovat víc, než umožňuje prohlížeč (např. v něm chcete zobrazit dvě řádky textu nebo ikony), můžete použít zástupný prvek, přes který pak zobrazíte průhledný select:

.select-wrapper {
    position: relative;
}
.select-wrapper > select {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    visibility: visible;
    opacity: .0001;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}

Když použijete tento styl, můžete do select-wrapper přidat libovolné HTML prvky a vlastní CSS, které pak bude zobrazeno jako váš selekt. Přitom ale vlastní hodnota bude stále uložena a změnitelná pomocí původního select prvku, který celý wrapper překrývá a reaguje na kliknutí. Díky nastavení opacity není vidět a je zcela průhledný, ale stále se chová jako viditelný prvek.

 

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *