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.

 

 

Napsat komentář

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