Od doby, kdy bylo vynalezeno CSS, si weboví vývojáři po celém světě přáli způsob, jak stylizovat vestavěné ovládací prvky prohlížeče. To je jednoduché pro jednoduché prvky, jako jsou tlačítka a textové vstupy, ale obtížné pro některé složitější prvky, jako je select a range . V tomto rychlém tipu vám ukážeme, jak na to.
Proč pseudoselektory?
Dosud neexistuje standardní způsob přizpůsobení vzhledu vestavěných prvků prohlížeče. Například vstup vyhledávání zobrazuje malé „x“, jehož stisknutím můžete vyhledávání zrušit. Toto je implementováno jako samostatný prvek interně, ale s běžným CSS se k němu nedostanete. Tvůrci prohlížečů si toho všimli a přidali selektory specifické pro dodavatele, které můžete použít. Pro toto "x" je použit selektor input[type=search]::-webkit-search-cancel-button .
Zde je obrovský seznam známých selektorů. Všechny prohlížeče poskytují některé selektory pro přizpůsobení vestavěných prvků, ale špatná zpráva je, že podpora je všude. Doufejme, že v budoucnu bude existovat standard, který do tohoto nepořádku vnese konzistenci. Prozatím však musíme cílit na každý prohlížeč zvlášť.
Pokud používáte Google Chrome, existuje snadný způsob, jak zjistit, který volič byste měli používat. Po povolení podpory Shadow DOM můžete vidět vnitřní strukturu vestavěných prvků prohlížeče. Zde je návod, jak to udělat, převzatý z našeho článku Tipy a triky pro Chrome DevTools:
Otevřete vývojářské nástroje a přejděte do Nastavení. Zde v části Obecné v části Prvky zaškrtněte Zobrazit stínový DOM uživatelského agenta. Nyní, když si prohlédnete prvky, uvidíte jejich #shadow-root. Když vyberete prvek v #shadow-root, na kartě Styly uvidíte, které selektory používá šablona stylů uživatelského agenta k jejich stylování. Většinu času je to selektor, který hledáte.
Mějte na paměti, že většina následujících experimentů funguje pouze v prohlížečích Chrome a Safari. Firefox a IE nepodporují mnoho pseudo selektorů, které jsou nutné k přizpůsobení vestavěných prvků, takže zobrazují běžné verze. Jednoho dne, až budeme mít zavedeny standardy, budou taková přizpůsobení fungovat všude.
1. Zaškrtávací políčka
Se zaškrtávacími políčky v CSS nemůžete dělat mnoho, kromě toho, že jim dáváte šířku a výšku. Chrome a Safari však podporují :before a :after pseudo prvky na vstupech, takže se můžete pobavit. Všimněte si, že značka zaškrtnutí je vytvořena výhradně pomocí CSS a je dokonce animovaná s přechodem zeslabovat.
Nastavením -webkit-appearance na none zabráníme použití výchozího stylu prohlížeče, což ponechává dveře našemu vlastnímu CSS otevřené. Také díky em jednotek, udělali jsme měřítko zaškrtávacího políčka s velikostí písma jeho rodiče. Zkuste to zvýšit.
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=checkbox].styled {
-webkit-appearance: none;
height: 1em;
position: relative;
background-color: #276FF4;
width: 1em;
border-radius: 3px;
outline: none;
font-size: 16px;
/* try this: */
/* font-size: 36px; */
vertical-align: middle;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
input[type=checkbox].styled:active {
box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.2) inset;
}
input[type=checkbox].styled:before,
input[type=checkbox].styled:after {
content: '';
background-color: inherit;
position: absolute;
transition: 0.1s background-color;
}
input[type=checkbox].styled:after {
width: 0.19em;
height: 0.65em;
-webkit-transform: rotate(36deg) translate(0.52em, -0.16em);
}
input[type=checkbox].styled:before {
width: 0.2em;
height: 0.4em;
-webkit-transform: rotate(-58deg) translate(-0.2em, 0.48em);
}
/* We use the checked selector to make the pseudo elements visible */
input[type=checkbox].styled:checked:after,
input[type=checkbox].styled:checked:before {
background-color: #fff;
} <label>
<input type="checkbox" /> Regular Checkbox
</label>
<label>
<input type="checkbox" class="styled" />
Styled Checkbox
</label> 2. Přepínače
Stejnou techniku můžeme použít na přepínačích. Zde je to jednodušší, protože nepotřebujeme zaškrtnout CSS. Toto stále funguje pouze v Chrome a Safari. Ostatní prohlížeče zobrazují běžný přepínač.
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=radio].styled {
-webkit-appearance: none;
height: 1em;
position: relative;
background-color: #276FF4;
width: 1em;
border-radius: 50%;
outline: none;
font-size: 14px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
input[type=radio].styled:checked:before {
content: '';
height: 0.4em;
width: 0.4em;
background-color: #FFF;
position: absolute;
border-radius: 50%;
top: 0.3em;
left: 0.3em;
} <label>
<input type="radio" name="test" /> Regular Radio
</label>
<label>
<input type="radio" class="styled" name="test" /> Styled Radio
</label> 3. Vyberte Prvky
Element select je notoricky obtížné stylizovat pomocí CSS. I dnes jsme omezeni tím, co můžeme změnit. Pro přizpůsobení šipky dolů můžeme použít obrázek na pozadí a trochu odsazení. V rozevíracím seznamu můžete určit velikost písma a pozadí prvků voleb, ale nic moc víc.
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
select.styled {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 1px solid #aaa;
padding: 2px 15px 2px 5px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
background-position: right center;
background-repeat: no-repeat;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #333;
}
/* Required to disable the default IE styles */
select.styled::-ms-expand {
display: none;
}
select.styled:hover {
border-color: #909090;
}
/* You have limited control on the drop down list. Uncomment this: */
/* select.styled option{
background-color:green;
color:#fff;
font-size:20px;
} */
<label>
<select>
<option>Cheeze</option>
<option>Bacon</option>
<option>Pasta</option>
<option>Pizza</option>
<option>Ice Cream</option>
</select> Regular Select
</label>
<label>
<select class="styled">
<option>Cheeze</option>
<option>Bacon</option>
<option>Pasta</option>
<option>Pizza</option>
<option>Ice Cream</option>
</select> Styled Select
</label> 4. Prvky rozsahu
Rozsah je jedním z novějších formulářových prvků podporovaných prohlížeči. Je také jedním z nejvíce přizpůsobitelných. Chrome, Safari a Firefox nám poskytují velké množství pseudoselektorů CSS, které můžeme použít ke stylování konkrétních částí prvku. Dokonce i IE má pro některé podporu, i když jsme je v našem příkladu neimplementovali. V tomto seznamu se dozvíte, co je k dispozici.
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
input[type=range].styled {
-webkit-appearance: none;
outline: 0;
width: 300px;
transition: 0.2s;
}
/* Chrome */
input[type=range].styled::-webkit-slider-runnable-track {
height: 2px;
background: #9DA0A6;
border: none;
border-radius: 3px;
}
input[type=range].styled::-webkit-slider-thumb {
-webkit-appearance: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #FFF;
margin-top: -7px;
vertical-align: middle;
border: 5px solid #276FF4;
transition: 0.15s;
}
input[type=range].styled::-webkit-slider-thumb:active {
height: 20px;
width: 20px;
margin-top: -9px;
}
/* Firefox */
input[type=range].styled::-moz-range-track {
height: 2px;
background: #9DA0A6;
border: none;
border-radius: 3px;
}
input[type=range].styled::-moz-range-progress {
background: #276FF4;
}
input[type=range].styled::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: #FFF;
margin-top: -7px;
vertical-align: middle;
border: 5px solid #276FF4;
transition: 0.15s;
box-sizing: border-box;
}
input[type=range].styled::-moz-range-thumb:active {
height: 20px;
width: 20px;
margin-top: -9px;
}
input[type=range].styled::-moz-focus-outer {
border: 0;
} <label>
<input type="range" /> Regular Range
</label>
<label>
<input type="range" class="styled" /> Styled Range
</label> 5. Ukazatele průběhu
Prvek pokroku nám také poskytuje značnou míru přizpůsobitelnosti. Ačkoli pro jednoduchý prvek, jako je tento, můžete stejně snadno vnořit dva divy a vytvořit si vlastní verzi.
body {
font: 13px sans-serif;
color:#444;
}
label {
padding: 10px;
display: block;
}
progress.styled {
margin-top: 15px;
width: 200px;
height: 12px;
background-color: #ddd;
border: none;
}
/* Chrome */
progress.styled::-webkit-progress-bar {
background-color: #ddd;
}
progress.styled::-webkit-progress-value {
background-color: #266FF4;
}
/* Firefox */
progress.styled::-moz-progress-bar {
background-color: #266FF4;
} <label>
<progress value="22" max="100"></progress> Regular Progress
</label>
<label>
<progress value="22" max="100" class="styled"></progress> Styled Progress
</label> Závěr
Je skvělé, že konečně můžeme upravit vestavěné ovládací prvky prohlížeče, ale ke standardizaci je ještě dlouhá cesta. Google Chrome je zde jasným lídrem, a pokud píšete aplikace nebo rozšíření pro Chrome, můžete pokračovat a používat vše, co jsme zde ukázali. Pokud však chcete konzistentní podporu napříč prohlížeči, nejlepším řešením je stále spoléhat na knihovny JavaScript a pluginy jQuery, jako je Chosen.