Проблема с кнопкой настраиваемого флажка
Я пытаюсь сделать настраиваемые кнопки флажков, которые при нажатии будут менять свой цвет как индикатор того, что они активны. Я дошел до точки, где это почти готово, но флажок появляется слева от поля, а не является самой кнопкой. Я не могу понять, как это сделать.
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}<input type = "checkbox" name = "test" /><label>Text goes here</label></input>
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
1
45
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Вы можете сделать это следующим образом, это решит вашу проблему:
Добавьте атрибут for в метку и установите атрибут id в типе input, это свяжет оба элемента, и вы сможете получить желаемый результат.
<input id = "my_checkbox" type = "checkbox" name = "test" />
<label for = "my_checkbox">
Text goes here
</label>
</input>
Здесь я поместил id = "my_checkbox" во вход флажка и добавил в атрибут for = "my_checkbox".
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: absolute;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}<input type = "checkbox" name = "test"><label>Text goes here</label></input>Другие вопросы по теме
При выборе глубоко вложенного флажка необходимо выбрать родительские флажки с помощью jQuery
Флажок React не работает должным образом
Почему текст не отображается так, как я написал в xml?
Angular 5 отключить и включить флажок в зависимости от условия
Правило управления выбором Nintex
Я застрял с атрибутом флажка
Дерево в Flexgrid + Angular 5
Flutter: мой флажок не сообщает об изменении при нажатии
Как показать флажок с меткой? мой код отображает только метку, почему?
Чекбокс Android RecyclerView проверяет себя
Похожие вопросы
Лучшие практики CSS: СУХОЙ
Сравнить две ссылки в монго?
Как смещать div в сетке CSS
Автоматическое увеличение специфичности класса с помощью sass
Проблемы с fxFlex API для Angular
Flexbox, столбец ведет себя иначе, чем строка
Есть ли способ получить xpath и css в браузере Edge?
Восстановление (обновление, восстановление) удаленного элемента
Я не могу получить свой svg: наведите курсор на работу
Функция отключения jquery не работает с другим кодом jquery для раскрывающегося списка
Можете поставить исполняемый скрипт, чтобы нам было легко анализировать код?