Beispiel:CSS-UI-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>accent-color</title>
<style>
body {
--brand: lime;
accent-color: var(--brand);
}
form {
padding: 1.5rem;
background-color: rgba(245, 245, 245);
border-radius: 0.5rem;
}
fieldset {
border-color: var(--brand);
display: grid;
grid-template-columns: 2em 1fr;
}
legend {
border: thin solid var(--brand);
border-radius: 1em;
padding: 0.2em 0.5em;
font-weight: 700;
}
fieldset > * + * {
margin-top: 0.5rem;
}
form > * + * {
margin-top: 1.5rem;
}
input[type="checkbox"],
input[type="radio"]{
width: 1.5em;
height: 1.5em;
margin-right: 0.65rem;
}
input[type="range"],
progress {
margin-left: auto;
flex: 0 1 50%;
}
body {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 1em;
}
h1 {
grid-column: 1 /-1;
}
</style>
<script>
function farbwechsler(colorValue) {
document.body.style.setProperty('--brand', colorValue);
}
</script>
</head>
<body>
<h1>accent-color</h1>
<aside>
<h2>Wählen Sie Ihre Lieblingsfarbe!</h2>
<label for="farbe">Klicken Sie auf das Farbfeld:</label>
<br/>
<input type="color" value="#ff0000" id="farbangabe" name="farbe" oninput="farbwechsler(farbangabe.value)"
pattern="^#([A-Fa-f0-9]{6})$" required title="Hexadezimal-Wert eingeben!">
</aside>
<form action="">
<fieldset>
<legend>Belag</legend>
<input type="checkbox" id="belag_1b" value="schinken" name="belag">
<label for="belag_1b">Schinken</label>
<input type="checkbox" id="belag_2b" value="salami" name="belag" checked>
<label for="belag_2b">Salami</label>
<input type="checkbox" id="belag_3b" value="funghi" name="belag">
<label for="belag_3b">Funghi</label>
</fieldset>
<fieldset>
<legend>Käse</legend>
<input type="radio" id="cheese_1b" value="realThing" name="cheese" checked>
<label for="cheese_1b">Mozzarella</label>
<input type="radio" id="cheese_2b" value="vegan" name="cheese">
<label for="cheese_2b">veganer Analog-Käse</label>
</fieldset>
<label for="progress_b">Order progress</label>
<progress id="progress_b" max="100" value="70">70%</progress>
<br>
<label for="range_b">How satisfied are you with the service?<br></label>
<input type="range" min="0" max="10" value="5" id="range_b">
</form>
</body>
</html>
