CSS barva currentColor

Klíčové slovo "currentColor" obsahuje aktuální barvu elementu. "currentColor" funguje od IE 9. Ve starších prohlížečích je možné využít výchozí barvy (bez přímého uvedení).

Použitím "currentColor" si můžeme zkrátit zápis, pokud jednomu prvku měníme při určité události jak barvu textu, tak rámečku na totožnou hodnotu.
Běžně by jsme to napsaly například tatko:

button {
  color: blue;
  border: 2px solid blue;
}
button:hover {
  color: red;
  border-color: red;
}
button:focus, button:active {
  color: green;
  border-color: green;
}

POkud využijeme "currentColor", tak máme totéž, ale kratší.

button {
  color: blue;
  border: 2px solid currentColor;
}
button:hover {
  color: red;
}
button:focus, button:active {
  color: green;
}

<< zpět