Как сделать красивые кнопки на основе checkbox

@vlad-55 · Регистрация: 21.02.2009

Студворк — интернет-сервис помощи студентам

Добрый вечер!

Хочется сделать красивые кнопки на основе checkbox. Макет находится вот здесь.

Коды такие:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="group_a">
     
        <div class="kn kn_1">
        <input type="checkbox" id="kn_1" value="Rainbow Dash"><label for="kn_1">
        <img src="/emoji/1f0cf.png">Первый маршрут</label>
        </div>
         
        <div class="kn kn_2">
        <input type="checkbox" id="kn_2" value="Rainbow Dash"><label for="kn_2">
        <img src="/emoji/1f68e.png">Второй маршрут</label>
        </div>
     
 
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#group_a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: linear-gradient(to top, #FFFFFF, #FFEFBA);
    border: 2px solid red;
    width:80%;
    margin:2em auto;
    padding:1em 0 2em 0;
    border-radius: 20px;
    color: gray;
}
 
#group_a  label {
          
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 1em;
    margin: 5px 5px;
    padding: 5px 10px;
    font-size: 100%;  
    border: 2px solid blue;
}
  
.kn input {
    position: absolute;
    opacity: 0;
    
}
  
.kn img {
    width: 1.5em;
    height: auto;
    margin-right: 5px;
}
 
.kn_1 input:checked + label {
  color: red;
  background-color: aquamarine;
}
 
.kn_2 input:checked + label {
  color: fuchsia;
  background-color: olive;
}

Не удается решить две однородные проблемы:

1. Когда кнопки не выбраны, им надо дать белый фон. Но добавление background-color: white; блокирует изменение цвета нажатой кнопки.
2. Для нажатой кнопки не удается убрать border: 2px solid blue;

Не знаю, как решить эти проблемы.

@AlexZaw · 03.05.2023, 21:02

Сообщение от vlad-55

блокирует изменение цвета нажатой кнопки.

Сообщение от vlad-55

Для нажатой кнопки не удается убрать border: 2px solid blue;

Потому что не надо стилизовать через id. Почитайте про "вес селекторов", у вас стили заданные через id просто перебивают ваши остальные стили.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.kn label {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 1em;
    margin: 5px 5px;
    padding: 5px 10px;
    font-size: 100%;  
    border: 2px solid blue;
    background-color: #fff;
}
 
.kn_1 input:checked + label {
  color: red;
  background-color: aquamarine;
  border: 2px solid transparent;
}
 
.kn_2 input:checked + label {
  color: fuchsia;
  background-color: olive;
  border: 2px solid transparent;
}

@vlad-55 · 03.05.2023, 21:57 **[ТС]**

Спасибо!

Вот так заработало:

CSS
1
border: 2px solid transparent !important;

@AlexZaw · 03.05.2023, 23:01

vlad-55, использовать !important без особых на то причин - не очень хорошая идея. Например если вы захотите изменить border-radius при фокусе на кнопке или тот же фон при наведении, то вам опять придется добавлять !important. В результате у вас получится плохой код, где "важным" является очень многое. Так зачем везде писать !important если от него можно избавиться просто отказавшись от стилизации через id?

Плюс вы даже через js не сможете перебить стили которые в css помечены как !important. Вернее сможете, но лишь используя в добавляемых инлайн стилях все тот же !important, что согласитесь уже совсем перебор (как и количество используемых !important в этом сообщении

)

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,095
	03.05.2023, 23:01
	vlad-55, использовать !important без особых на то причин - не очень хорошая идея. Например если вы захотите изменить border-radius при фокусе на кнопке или тот же фон при наведении, то вам опять придется добавлять !important. В результате у вас получится плохой код, где "важным" является очень многое. Так зачем везде писать !important если от него можно избавиться просто отказавшись от стилизации через id? Плюс вы даже через js не сможете перебить стили которые в css помечены как !important. Вернее сможете, но лишь используя в добавляемых инлайн стилях все тот же !important, что согласитесь уже совсем перебор (как и количество используемых !important в этом сообщении ) 3

Как сделать красивые кнопки на основе checkbox

Решение