Jak přepsat výchozí barvu označeného textu

Jak přepsat výchozí barvu označeného textu na webu? Velmi jednoduchou CSS3 technikou je tohoto možné docílit. Tato technika se dá aplikovat stejně jako všechny ostatní pseudo třídy, tedy na různé blokové a ostatní elementy.

Potlačení výchozí barvy výběru pomocí CSS

Jak se tento zázrak dělá? Jednoduše! Existuje nová pseudo-třída, kterou v CSS3 definici najdete pod selektorem ::selection. Toto nastavení přepíše výchozí nastavení prohlížeče a vybraný text bude mít barvu, kterou si nadefinujete.

Kompatibilita není bůh ví jaká (05/2011), avšak tuto možnost pro moderní prohližeče můžete využít. Ostatní prohlížeče tuto definici budou jednoduše ignorovat.

Následující

::selection 
{
  background: lime; /* pro Safari */
}

::-moz-selection 
{
  background: lime; /* pro Firefox */
}

Zkusíme si nastavit růžovou barvu výběru textu na následujícím odstavci. Použijeme k tomu následující CSS definici:

p.purple::selection 
{
  background: lime; /* pro Safari */
  color: #fff;
}

p.purple::-moz-selection 
{
  background: lime; /* pro Firefox */
  color: #fff;
}

Příklad - live demo

Vyzkoušejte si text-selection označením níže uvedeného textu:

Lorem ipsum dolor sit amet consectetuer fames at fringilla id Integer. Ultrices non ac interdum in Integer ullamcorper lacus quis tellus tristique. Et congue adipiscing semper mauris elit mi pede Curabitur Mauris hendrerit. Ut quis congue quis convallis rhoncus vel dictum consequat ac mauris. Sit volutpat pede Curabitur Nunc purus.

Kombinace více barev vybraného textu - live demo

p.purple::selection 
{
  background: purple; /* pro Safari */
  color: #fff;
}

p.purple::-moz-selection 
{
  background: purple; /* pro Firefox */
  color: #fff;
}  

p.navy::selection 
{
  background: blue; /* pro Safari */
  color: #fff;
}

p.navy::-moz-selection 
{
  background: blue; /* pro Firefox */
  color: #fff;
}

p.yellow::selection 
{
  background: yellow; /* pro Safari */
  color: #000;
}

p.yellow::-moz-selection 
{
  background: yellow; /* pro Firefox */
  color: #000;
}

Vyzkoušejte si text-selection označením níže uvedeného textu:

Lorem ipsum dolor sit amet consectetuer fames at fringilla id Integer. Ultrices non ac interdum in Integer ullamcorper lacus quis tellus tristique. Et congue adipiscing semper mauris elit mi pede Curabitur Mauris hendrerit. Ut quis congue quis convallis rhoncus vel dictum consequat ac mauris. Sit volutpat pede Curabitur Nunc purus.

Lorem ipsum dolor sit amet consectetuer fames at fringilla id Integer. Ultrices non ac interdum in Integer ullamcorper lacus quis tellus tristique. Et congue adipiscing semper mauris elit mi pede Curabitur Mauris hendrerit. Ut quis congue quis convallis rhoncus vel dictum consequat ac mauris. Sit volutpat pede Curabitur Nunc purus.

Lorem ipsum dolor sit amet consectetuer fames at fringilla id Integer. Ultrices non ac interdum in Integer ullamcorper lacus quis tellus tristique. Et congue adipiscing semper mauris elit mi pede Curabitur Mauris hendrerit. Ut quis congue quis convallis rhoncus vel dictum consequat ac mauris. Sit volutpat pede Curabitur Nunc purus.