|
Сообщение от Байт
|
|
То есть - понять механизмы.
|
Такие кнопки, которые хранят в себе нажатое состояние, делаются при помощи элементов <input type="checkbox"> и <label>.
Вот ваш пример в чистом виде...
<html>
<head>
<meta charset="utf-8">
<style></style>
</head>
<body>
<input type="checkbox" id="sun">
<label for="sun">Солнце</label>
<input type="checkbox" id="moon">
<label for="moon">Луна</label>
<input type="checkbox" id="mercury">
<label for="mercury">Меркурий</label>
</body>
</html>
Или даже так...
<html>
<head>
<meta charset="utf-8">
<style></style>
</head>
<body>
<label class="toggler">
<input type="checkbox" checked>
<span>Солнце</span>
</label>
<label class="toggler">
<input type="checkbox">
<span>Луна</span>
</label>
<label class="toggler">
<input type="checkbox">
<span>Меркурий</span>
</label>
</body>
</html>
И уже отталкиваясь от правильной разметки, выясняется, что для достижения вашего эффекта нужно всего лишь применить стили.
<html>
<head>
<meta charset="utf-8">
<style>
.toggler {
width: max-content;
display: block;
}
.toggler input {
position: absolute;
opacity: 0;
}
.toggler input + span {
background-color: #ffffff;
cursor: pointer;
padding: 0.5em;
margin: 0.5em;
display: block;
}
.toggler input:focus + span {
outline: 1px dotted;
outline: -webkit-focus-ring-color auto 1px;
}
.toggler input:checked + span {
background-color: #9999ff;
}
</style>
</head>
<body>
<label class="toggler">
<input type="checkbox" checked>
<span>Солнце</span>
</label>
<label class="toggler">
<input type="checkbox">
<span>Луна</span>
</label>
<label class="toggler">
<input type="checkbox">
<span>Меркурий</span>
</label>
</body>
</html>
Этот пример работает даже в самых старых браузерах, а самое главное то, что он является кроссплатформенным и доступным. Также имеется уже готовое API для работы с состоянием, а также эти кнопки могут быть частью чего-то большего.
