Cannot style children of a Label element

Question

I'm trying to customize a checkbox but for some reason I cannot style children of this label element. For example, trying to add padding to the child Input element I have tried the last two entries shown in the CSS but neither works. What is going on here?

    #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>

You might find this useful!: [**Customize radio and checkbox**](https://stackoverflow.com/a/17541916/383904) — Roko C. Buljan, Aug 23 '21 at 20:22
You're referencing container as a class and it's and ID. Instead of .container use #container — Gerardo Ruiz, Aug 23 '21 at 20:29
Thanks for pointing that out Gerardo, in my real code it is correct and that doesn't solve the problem. Just missed that when reformatting code for the question. I have updated the the code in the question. — nothing special, Aug 23 '21 at 20:37

score 2 · Accepted Answer · answered Aug 23 '21 at 20:17

2

There are limited set of styles that can be applied to elements like input. For example padding has no effect on input[type="checkbox"]. You need to hide the element and redraw it. Check out the links in this answer

answered Aug 23 '21 at 20:17

Ahmad Alfy

13,107
6
65
99

I think OP is also actually trying to make a custom checkbox - hidden input and styled .checkmark - but got lost in translation :) – Roko C. Buljan Aug 23 '21 at 20:19

Cannot style children of a Label element

1 Answers1