codepens/css-only-switch-checkboxes/dist/index.html

43 lines
897 B
HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - CSS-only &lt;switch&gt; checkboxes</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<fieldset>
<legend>Thrusters</legend>
<center>
<label>
<input type="checkbox" class="switch">
Bow
</label>
</center>
<label>
<input type="checkbox" class="switch" style="--bg-checked: rgb(240,70,110);">
Port
</label>
<label>
<input type="checkbox" class="switch" checked style="--bg-checked: rgb(50,240,130);">
Starboard
</label>
<center>
<label>
<input type="checkbox" class="switch">
Stern
</label>
</center>
</fieldset>
<label style="position:fixed; right:0;">
<input type="checkbox" class="switch" onclick="document.documentElement.classList.toggle('dark',this.checked)">
Dark Mode
</label>
<!-- partial -->
</body>
</html>