CSS appearance

Kromě neutrálních značek <div> a <span>, které se bez patřičného stylování zobrazují bez zvláštních stylů, existují elementy, které visuální podobu přebírají z operačního systému – typicky prvky formulářů.

Vlastností appearance jde tento vzhled přiřadit normálním HTML značkám. (Appearance znamená v angličtině vzhled.)

Symbolický zápis může vypadat následovně:

.jako-tlacitko {
  appearance: button; 
}

Po přiřazení této třídy pro běžný <div> vznikne něco jako <button>.

Jedná se pouze o visuální změnu. Veškeré chování je jinak stejné jako u obyčejného elementu.

Podpora

Podpora chybí v Internet Exploreru / MS Edge a pro Chrome/Operu/Safari/Firefox je nutné použí CSS prefixy. Navíc se od sebe liší hodnoty pro -webkit- a -moz- prefix.

Možných hodnot existuje obrovské množství:

V praxi jakž takž rozumně fungují hodnoty nastavující tlačítko, checkbox a radio přepínač.

• appearance: button – Tlačítko
• appearance: checkbox –     checkbox
• appearance: radio –     checkbox

appearance: none

Možná nejzajímavější hodnota vlastnosti appearance je none. Ta totiž dokáže vypnout výchozí vzhled formulářových prvků a umožnit jejich vlastní stylování.

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Výsledek může vypadat třeba takto:

Vzhledem k nespolehlivosti vlastnosti appearance je ale pořád osvědčenější postup používat atrapy pomocí značky <label>:

Odkazy jinam

• CSS Tricks: appearance