CSS vlastnost 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>.

Text v „tlačítku“

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: buttonTlačí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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Styl seznamu list-style

Styl odrážkového seznamu

CSS vlastnost list-style upravuje vzhled seznamů <ul> a <ol>.

CSS vlastnosti content a attr

Úprava obsahu pomocí content a attr

Pomocí CSS vlastnosti content a funkce attr lze ovlivňovat z CSS výsledný textový obsah webu.

Stylování tabulky

Stylování HTML tabulek

Jednoduché barvení a další stylování značky <table>.

CSS transition

Animace v CSS pomocí transition

CSS vlastností transition lze na stránce docílit přechodových animací bez JavaScriptu.

Vylepšené stylování checkboxů

Pokročilé stylování checkboxu

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

Komentáře