我知道如何创建可切换的复选框，但我需要创建一个可切换的过滤器按钮。现在我只想知道如何构建 HTML 和 CSS 使其看起来像这样:
当点击位置 4 过滤器时，它应该看起来像位置 1，我应该将其编码为 anchor 标记、按钮还是输入 [type="checkbox"]？
最佳答案
这是一种方法。我从 https://www.w3schools.com/howto/howto_css_custom_checkbox.asp 中简化并改编了它
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.container {
display: block;
padding: 20px;
margin: 20px;
}
/* Hide the browser's default checkbox */
.container input {
display: none;
}
/* Create a custom checkbox */
.checkmark {
height: 25px;
width: 100px;
padding: 20px;
margin: 20px;
background-color: #eee;
}
.container:hover input~.checkmark {
background-color: lightgreen;
}
.container input:checked~.checkmark {
background-color: green;
}
</style>
</head>
<body>
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark">Location 1</span>
</label>
<label class="container">
<input type="checkbox">
<span class="checkmark">Location 2</span>
</label>
<label class="container">
<input type="checkbox">
<span class="checkmark">Location 3</span>
</label>
<label class="container">
<input type="checkbox">
<span class="checkmark">Location 4</span>
</label></body>
</html>
关于javascript - 如何使用 HTML 和 CSS 创建可切换按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53693530/