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

Posted 2023-03-06

【中文标题】不能为 Label 元素的子元素设置样式

【英文标题】：Cannot style children of a Label element

【发布时间】：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，在我的真实代码中它是正确的，但这并不能解决问题。只是在重新格式化问题的代码时错过了这一点。我已经更新了问题中的代码。

【参考方案1】：

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

【讨论】：

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