This answer to this question is probably extremely obvious and I’m just not seeing it, but how do you make sure certain style attributes only apply to one element when referencing the tag that they use.

I currently have a pure css Collapsible I snagged from DigitalOcean and I am using Ember Components.

The code uses a checkbox to activate the Collapsible – which means it hides the checkbox in the style tag referencing the input tag:

<style>
    input[type='checkbox'] {
      display: none;
    }
</style>

...

<input id="collapsible" class="toggle" type="checkbox">

However, in doing so, I end up with all the other checkboxes on the page becoming hidden as well.
(And this style tag lives inside the .hbs Component file for the dropdown, dunno if that changes anything)

How can I target just the Collapsible specifically for hiding the checkbox?
Also let me know if there is any other information that might be helpful 🙂

So far I’ve tried wrapping this attribute inside another attribute:

 .hide-checkbox {
    input[type='checkbox'] {
      display: none;
    }
  }

But that just gave me a text input box instead of a checkbox.