Оригинал, без javascript, сумасшедший ответ
Ваша проблема в том, что вы не можете выбрать родительский элемент элемента, и поэтому вы не можете сказать «если этот флажок установлен, измените метку родительского элемента.цвет."К сожалению, CSS-селектор :has ничем не поддерживается, или это может вас спасти.
Однако.Если вы безумны и ненавидите, когда все выглядит хорошо, вы можете делать сумасшедшие вещи с очертаниями и полями.Это Mucho Janky , но это вроде работает.Kinda.
Вы можете поиграть с этим в этом коде: https://codepen.io/anon/pen/WPQJgw
Последующее, не сумасшедшее, использует ответ jQuery
Хорошо, ваши изменения говорят, что вы можетеиспользуйте javascript или jQuery.Предположим, у вас уже есть jQuery, загруженный на страницу, поскольку это сокращенный код.
Кодовый код здесь: https://codepen.io/tobyinternet/pen/daYqJq
Я объясню, что здесь.
Вы не можете изменить HTML, но (с помощью JavaScript) вы МОЖЕТЕ назначить классы элементам.Итак, во-первых, мы создаем классы, которые модифицируют существующие элементы.
- Убрать маркеры из элементов списка
- Скрыть фактические флажки
- Сделать метки в блочные элементы и датьих цвета и состояния при наведении
- Создайте стиль, чтобы указать, когда «кнопка» «проверена»
Затем мы используем javascript, чтобы сначала применить стили кнопок при загрузке страницы, а затем применить соответствующиестиль отмечен / не отмечен при щелчке по элементу.
Цель этого способа заключается в том, что если пользователь не может (или не хочет) использовать JavaScript, он просто видит флажки.Все еще полностью годный к употреблению, хороший для доступности.Если у них do установлен javascript, то та-да!Кнопки.
$(document).ready(function(){
$('.fes-category-checklist, .fes-category-checklist .children').addClass('nolist');
$('.selectit').addClass('checkbutton');
$('.checkbutton').click(function(){
if( $(this).children('input:checkbox').is(':checked') ) {
$(this).addClass('ischecked');
} else {
$(this).removeClass('ischecked');
}
});
});
.nolist {
list-style: none;
}
.nolist li {
margin: 20px 0;
}
.checkbutton {
padding: 8px 20px;
text-align: center;
display: block;
width: 140px;
height: 30px;
line-height: 30px;
margin-right: -130px;
border: 1px solid black;
border-radius: 6px;
background-color: yellow;
transition: all .2s;
box-shadow: 0px 3px 8px rgba(50,50,50,.5);
}
.checkbutton:hover {
background-color: #CCCC00;
}
.checkbutton:active {
box-shadow: 0px 1px 2px rgba(50,50,50,.5);
}
.checkbutton input[type="checkbox"] {
position: absolute;
left: -99999px;
}
.ischecked {
background-color: blue;
color: white;
}
.ischecked:hover {
background-color: lightblue;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="fes-category-checklist">
<li id="download_category-156" data-open="false" style="display: list-item;"><label class="selectit"><input value="156" type="checkbox" name="download_category[]" id="in-download_category-156"> 2D Assets</label>
<ul class="children">
<li id="download_category-183" data-open="false"><label class="selectit"><input value="183" type="checkbox" name="download_category[]" id="in-download_category-183"> Motion Graphics</label></li>
<li id="download_category-163" data-open="false"><label class="selectit"><input value="163" type="checkbox" name="download_category[]" id="in-download_category-163"> HDRI</label></li>
<li id="download_category-162" data-open="false"><label class="selectit"><input value="162" type="checkbox" name="download_category[]" id="in-download_category-162"> Materials</label></li>
<li id="download_category-161" data-open="false"><label class="selectit"><input value="161" type="checkbox" name="download_category[]" id="in-download_category-161"> Textures</label></li>
</ul>
</li>
</ul>