How to make a checkbox into a button? - html

Question

Here is the code. There is a search bar where a user can put in a topic then select a button that shows different categories.
<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>
This search form works perfectly fine with checkboxes. What should I do as an alternative? Is there a way I can style the checkboxes as buttons. If they are checkboxes how can I make it so that a user can only pick one category.

Answer 1

Use radio buttons.
Show name for radio with label.
To style a radio button, hide it, and add pseudo element.

Answer 2

<button> is it's own tag.
<button class="spec" name="category5">category5</button>
If you wanted to use CSS (you didn't tag it in your post), you can try this:
https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button

Answer 3

<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="**navi-toggle**">
<label for="**navi-toggle**" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
</div>
.navigation {
&__checkbox {
display: none;
}
&__button{
background-color: $color-white;
height: 7rem;
width: 7rem;
}
You say that you want to be able to still use checkbox as that is what functions... Well you could do so and use a label that is linked to that checkbox, and then simply style your label as your button.