Barva označeného textu

Označení textu pomocí selection

Výchozí styl výběru je většinou modré pozadí a bílý text. Pomocí stylu pro ::selection je možné toto chování změnit. Kromě důvodu čistě estetického, aby výběr ladil k designu stránky, existuje i praktický důvod – na stránce s modrým pozadím a bílým textem nebude standardní styl dobře vidět.

Před změnou si je dobré uvědomit, že uživatelé jsou na výchozí styl zvyklí, takže změna může přinést nejistotu.

Tento odstavec má nestandardní styl při výběru.

Některé prohlížeče – Firefox a Internet Explorer – dokáží výchozí barevný styl ::selection automaticky invertovat (bílé pozadí, modrý text), aby byl kontrastní k pozadí.

Kromě staré Opery 12 jde měnit barvu výběru i ve formulářových polích (<input>/<textarea>).

Zápis

Styl označení textu jde nastavit globálně pro celou stránku:

::selection {
  /* styly pro všechny výběry na stránce */
}

Nebo i pro zvláštní elementy.

.zvlastni-element::selection {
  /* styly pro .zvlastni-element */
}

Povolené vlastnosti

Pseudo-element ::selection má zabudovanou ochranu před příliš kreativními designéry, měnit tak jde pouze:

  • color – barva písma
  • background-color – barva pozadí (nejde použít obrázek a podobně), jde použít zápis zkratkou background
  • text-shadow – stín textu (nefunguje v IE a staré Opeře 12)

Podpora

Měnit styl označeného textu je možné od IE 9. Firefox vyžaduje použít -moz- prefix. Selektor s prefixem nelze spojit se selektorem bez něj. Tohle proto nebude fungovat:

::selection, ::-moz-selection {
  /* nebude fungovat */
}

Oba zápisy je nutné duplikovat:

::selection {
  color: yellow;
  background: red;
}
::-moz-selection {
  color: yellow;
  background: red;
}

Živá ukázka

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ářů ↓

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

CSS 3 selektory

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

Stylování tabulky

Stylování HTML tabulek

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

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