不能为 Label 元素的子元素设置样式答案

【问题标题】：Cannot style children of a Label element不能为 Label 元素的子元素设置样式
【发布时间】：2021-10-24 03:38:42
【问题描述】：

我正在尝试自定义一个复选框，但由于某种原因，我无法设置此标签元素的子元素的样式。例如，尝试向子 Input 元素添加填充我尝试了 CSS 中显示的最后两个条目，但都不起作用。这是怎么回事？

    #container {
      display: flex;
      flex-direction: column;
    }

    #container div {
      display: flex;
    }

    .test {
      display: flex;
      height: 4rem;
      align-items: center;
      padding-left: 2rem;
    }

    .container input {
      padding-right: 3rem;
    }
    
    .test input {
      padding-right: 3rem;
    }

    <section id="container">
        <div>
            <label class="test">Expand Sidebar To Show Text                     
                <input type="checkbox">
                <span class="checkmark"></span>
            </label>
        </div>
    </section>

【问题讨论】：

您可能会发现这很有用！：Customize radio and checkbox
您将容器作为一个类引用，它是和 ID。而不是 .container 使用 #container
感谢您指出 Gerardo，在我的真实代码中它是正确的，但这并不能解决问题。只是在重新格式化问题的代码时错过了这一点。我已经更新了问题中的代码。

标签： css flexbox css-selectors

【解决方案1】：

可应用于input 等元素的样式有限。例如padding 对input[type="checkbox"] 没有影响。您需要隐藏元素并重新绘制它。查看this answer中的链接

【讨论】：

我认为 OP 实际上也在尝试制作一个自定义复选框 - 隐藏输入和样式 .checkmark - 但在翻译中迷路了:)