时间戳

首页 > 解决方案 > 将 CSS 样式添加到复选框的父 div

html - 将 CSS 样式添加到复选框的父 div

问题描述

我有以下 HTML 代码

    <div class="form-checkboxes">
         <div class="js-form-item">
            <input data-drupal-selector="edit-field-faqs-categories-target-id-24" type="checkbox" id="edit-field-faqs-categories-target-id-24--sdfdf" name="field_faqs_categories_target_id[24]" value="24" checked="checked" class="form-checkbox">
            <label for="edit-field-faqs-categories-target-id-24--sdfdf" class="option">APIs</label>
          </div>

        <div class="js-form-item">
            <input data-drupal-selector="edit-field-faqs-categories-target-id-21" type="checkbox" id="edit-field-faqs-categories-target-id-21--wwww" name="field_faqs_categories_target_id[21]" value="21" checked="checked" class="form-checkbox">
            <label for="edit-field-faqs-categories-target-id-21--wwww" class="option">Business</label>
          </div>
    </div>

我有一个带有父 div 的输入复选框js-form-item。如果选中该复选框，我想为父 div 添加背景颜色，我尝试了以下代码，但它不起作用

 .js-form-item:has(> input[type=checkbox]:checked){ 
   background:#000000
  }

谁能帮忙

标签： htmlcsscss-selectors

解决方案

我认为您的 css 选择器是正确的，应该可以工作，但我不知道，因为我从未使用过:has，因为:has尚不支持。查看MDN 页面的浏览器兼容性部分。你也正确地达到了:has：我不认为你的精确用法可以用纯 CSS 来完成。我相信您使用当前工具的选择是使用 JavaScript 或尝试更改您的样式，以便它可以应用于复选框。

推荐阅读