CSS Lastnost: accent-color

Lastnost accent-color določa barvo poudarka za kontrolnike uporabniškega vmesnika, kot so input type="checkbox", input type="radio", input type="range" in progress.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>accent-color</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        input[type=checkbox] {
            accent-color: red;
        }
        input[type=radio] {
            accent-color: blue;
        }
        input[type=range] {
            accent-color: orange;
        }
        progress {
            accent-color: green;
        }
    </style>
</head>
<body>
<h3>Barva poudarkov (ang. Accent color) za potrditvena polja.</h3>
<input id="check1" type="checkbox" name="sadje1" value="Banane"><label for="check1">Banane</label><br><br>
<input id="check2" type="checkbox" name="sadje2" value="Jagode"><label for="check2">Jagode</label>

<h3>Barva poudarkov (ang. Accent color) za izbirne gumbe.</h3>
<input id="radio1" type="radio" name="sadje1" value="Banane"><label for="radio1">Banane</label><br><br>
<input id="radio2" type="radio" name="sadje2" value="Jagode"><label for="radio2">Jagode</label>

<h3>Barva poudarkov (ang. Accent color) za polje obsega.</h3>
<label for="rang"></label><input id="rang" type="range" name="obseg" value="Obseg">

<h3>Barva poudarkov (ang. Accent color) za element napredovanja.</h3>
<label>10% </label><progress id="napredek" value="10" max="100">10%</progress>
</body>
</html>

REZULTAT

auto	Brskalnik izbere barvo poudarka.	Glej primer
inherit	Podeduje lastnost od nadrejenega elementa.	Glej primer
initial	Nastavi na privzeto vrednost.	Glej primer

Podaja barvo naglasa za kontrolnike uporabniškega vmesnika.