Как создать переключаемую кнопку с использованием HTML и CSS - PullRequest
Новая
       1

Как создать переключаемую кнопку с использованием HTML и CSS

0 голосов
/ 09 декабря 2018

Я знаю, как создавать переключаемые флажки, но мне нужно создать переключаемую кнопку фильтра.Пока я только хочу знать, как структурировать HTML и CSS, чтобы он выглядел следующим образом:

enter image description here

Когда щелкает фильтр местоположения 4, ондолжен выглядеть как Расположение 1, я должен кодировать это как теги привязки, кнопки или ввод [type = "checkbox"]?

1 Ответ

0 голосов
/ 09 декабря 2018

Вот один из способов сделать это.Я упростил и адаптировал это из 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...