Question

我知道如何创建可切换的复选框，但是我需要创建可切换的过滤器按钮。现在，我只想知道如何构造HTML和CSS，使其看起来像这样：

点击位置4过滤器后，它应该看起来像位置1，我应该将其编码为定位标记，按钮还是输入[type =“ checkbox”]？

Answer 1

这是一种方法。我简化并改编了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>

Answer 2

你可以使用这个

See Css Codes

<label>
  <input type="checkbox">
  <span class="switch-checkbox">
    <div class="circle-icon"></div>
    <div class="circle-icon2"></div>

  </span>

</label>

如何使用HTML和CSS创建可切换按钮

2 个答案: