如何使用HTML和CSS创建可切换按钮-Java 学习之路

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

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

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>

回复于 2024-04-24T17:16:41+08:00

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

1 回答

相关问题