如何将复选框变成按钮？答案

【问题标题】：How to make a checkbox into a button?如何将复选框变成按钮？
【发布时间】：2020-03-30 20:11:23
【问题描述】：

这里是代码。有一个搜索栏，用户可以在其中输入一个主题，然后选择一个显示不同类别的按钮。

<form action="search.php" method="GET">
    <i class="fas fa-search" aria-hidden="true"></i>
    <input placeholder="Search" name="search" aria-label="Search">
    <input type="submit" value="S" class="searchButton" name="submit-request"/>
    <div class="buttons" style="text-align:center;">
            <input type="button" class="spec" name="category1" value="category1">
            <input type="button" class="spec" name="category2" value="category2">
            <input type="button" class="spec" name="category3" value="category3">
            <input type="button" class="spec" name="category4" value="category4">
            <input type="button" class="spec" name="category5" value="category5">
    </div>
</form>

此搜索表单与复选框完美配合。作为替代方案，我应该怎么做？有没有办法可以将复选框设置为按钮。如果它们是复选框，我该怎么做才能让用户只能选择一个类别。

【问题讨论】：

标签： html forms input get

【解决方案1】：

使用单选按钮。显示带有标签的收音机名称。设置单选按钮的样式、隐藏它并添加伪元素。

【讨论】：

【解决方案2】：

<button> 是它自己的标签。

<button class="spec" name="category5">category5</button>

如果你想使用 CSS（你没有在帖子中标记它），你可以试试这个： https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button

【讨论】：

【解决方案3】：

<div class="navigation">
            <input type="checkbox" class="navigation__checkbox" id="**navi-toggle**">

            <label for="**navi-toggle**" class="navigation__button">
                <span class="navigation__icon">&nbsp;</span>
            </label>
</div>

.navigation {
    &__checkbox {
        display: none;
    }

    &__button{
        background-color: $color-white;
        height: 7rem;
        width: 7rem;
    }

您说您希望仍然能够使用复选框，因为这就是功能...您可以这样做并使用链接到该复选框的标签，然后简单地将标签设置为您的按钮。

【讨论】：

请选择一个答案，帮助有相同问题的用户找到解决方案。