Cтилизировать checkbox

[sasha3337774]

Доброго времени суток:)
OC 2.3
в оригинале не очень красиво смотрится checkbox или же radio
на сколько сложно будет реализовать такое?
хочу сделать что-то подобное ↓
пример 1:

Спойлер

 
пример 2:

Спойлер

пример 3:

Спойлер

 

Змінено 8 лютого 2021 користувачем sasha3337774

[Venter]

почему бы не поискать в сети. в поиске вы быстрее найдете ответы на свои вопросы по этому поводу чем ждать здесь

вот https://yandex.kz/search/?lr=162&text=стилизовать checkbox css&src=suggest_B

вагон вариантов и примеров

[fanatic]

<div class="conteiner">
    <input type="checkbox" class="custom-checkbox" id="ch1" name="happy" value="11">
    <label for="ch1">11</label>
    <input type="checkbox" class="custom-checkbox" id="ch2" name="happy" value="22">
    <label for="ch2">22</label>
    <input type="checkbox" class="custom-checkbox" id="ch3" name="happy" value="33">
    <label for="ch3">33</label>
    <input type="checkbox" class="custom-checkbox" id="ch4" name="happy" value="44">
    <label for="ch4">44</label>
</div> 

.conteiner{
    width:70%;
    margin: 30px auto;
    position:relative;
    display:flex;
}
.custom-checkbox+label {
    width: 2em;
    height: 2em;
    background: #F5F6F7;
    border: 1px solid #adb5bd;
    border-radius: 0.25em;
    margin-right: 0.1em;
    display: flex ;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.custom-checkbox+label:hover{
    border-color: #FFB914;
    background-color: #FFB914;
    color:#fff;
}
.custom-checkbox:checked+label {
    border-color: #FFB914;
    background-color: #FFB914;
    color:#fff;
}

 

[sasha3337774]

4 минуты назад, Venter сказал:

почему бы не поискать в сети. в поиске вы быстрее найдете ответы на свои вопросы по этому поводу чем ждать здесь

вот https://yandex.kz/search/?lr=162&text=стилизовать checkbox css&src=suggest_B

вагон вариантов и примеров

спасибо, буду смотреть)

[sasha3337774]

4 минуты назад, fanatic сказал:

<div class="conteiner">
    <input type="checkbox" class="custom-checkbox" id="ch1" name="happy" value="11">
    <label for="ch1">11</label>
    <input type="checkbox" class="custom-checkbox" id="ch2" name="happy" value="22">
    <label for="ch2">22</label>
    <input type="checkbox" class="custom-checkbox" id="ch3" name="happy" value="33">
    <label for="ch3">33</label>
    <input type="checkbox" class="custom-checkbox" id="ch4" name="happy" value="44">
    <label for="ch4">44</label>
</div> 

.conteiner{
    width:70%;
    margin: 30px auto;
    position:relative;
    display:flex;
}
.custom-checkbox+label {
    width: 2em;
    height: 2em;
    background: #F5F6F7;
    border: 1px solid #adb5bd;
    border-radius: 0.25em;
    margin-right: 0.1em;
    display: flex ;
    align-items: center;
    justify-content: center;
    cursor:pointer;
}
.custom-checkbox+label:hover{
    border-color: #FFB914;
    background-color: #FFB914;
    color:#fff;
}
.custom-checkbox:checked+label {
    border-color: #FFB914;
    background-color: #FFB914;
    color:#fff;
}

 

огромное спасибо, сейчас будем делать)

[Prooksius]

Вот удобная библиотека, для начинающих - проще всего, мне кажется.