Как сделать флажок в кнопку? - PullRequest
Новая
       41

Как сделать флажок в кнопку?

0 голосов
/ 30 марта 2020

Вот код. Существует панель поиска, в которой пользователь может ввести topi c, а затем выбрать кнопку, отображающую различные категории. 

<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>

Эта форма поиска отлично работает с флажками. Что я должен сделать в качестве альтернативы? Есть ли способ, которым я могу стилизовать флажки как кнопки. Если это флажки, как я могу сделать так, чтобы пользователь мог выбрать только одну категорию.

Ответы [ 3 ]

0 голосов
/ 30 марта 2020

Используйте радио кнопки. Покажите название для радио с меткой. Чтобы оформить радио-кнопку, спрячьте ее и добавьте псевдоэлемент.

0 голосов
/ 30 марта 2020 
<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;
    }

Вы говорите, что хотите иметь возможность по-прежнему использовать флажок, так как это именно те функции ... Ну, вы можете сделать это и использовать ярлык, связанный с этим флажком, а затем просто стилизовать свой ярлык как свой. кнопка.

0 голосов
/ 30 марта 2020

<button> - это собственный тег. 

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

Если вы хотите использовать CSS (вы не отметили его в своем сообщении), вы можете попробовать это: https://www.w3schools.com/css/tryit.asp?filename=trycss_form_button

...