loading...

My CSS challenge. Create custom checkboxes and radio buttons using the attribute selector

melnik909 profile image Stas Melnikov Updated on ・2 min read

css-challenge (4 Part Series)

1) My CSS challenge. Create custom checkboxes and radio buttons using the attribute selector 2) My CSS challenge "Set styles for the disabled buttons without CSS overriding" 3) My CSS challenge. Align the avatar inside of the comment component using the margins 4) My CSS challenge. Use background-position syntax to customize the select element

What you need to know to solve this challenge: the sibling combinator, the attribute selector.

Hey friends. I wrote the CSS challenge for you. In this challenge we'll create the component to display custom checkboxes and radio buttons. I made all the work and the result looks as shown below:

Now I use the .checkbox__input and .radio__input classes in my solution.

<label class="toggle checkbox">
  <input class="toggle__input checkbox__input" type="checkbox">
  <span class="toggle__text">Show all</span>
</label>

<label class="toggle radio">
  <input class="toggle__input radio__input" type="radio" name="demo">
  <span class="toggle__text">Show all</span>
</label>
.checkbox__input ~ .toggle__text::before{
    background-position: 0 0;
}

.checkbox__input:checked ~ .toggle__text::before{
    background-position: 0 -1.625rem;
}

.radio__input ~ .toggle__text::before{
    background-position: 0 -3.125rem;
}

.radio__input:checked ~ .toggle__text::before{
    background-position: 0 -4.625rem;
}

But I'd like to remove them. I suggest you do it. Use the attribute selector for solving this challenge.

You should complete the following steps:

  1. Download the css-challenges#10.zip file with source code here
  2. Go to the source_code folder
  3. Open the challenge.css file in your code editor
  4. Change current selectors using the attribute selector
  5. Check your solution using the solution.pdf file

I write different CSS challenges on my Patreon. I really want to help you to improve your CSS skills. I hope you'll want to test yourself and you'll check other css challenges out.

P.S. This post was written with the support of my patrons: Ashlea Gable, Tatiana Ten, Claire Collins, Ben Rinehart.

css-challenge (4 Part Series)

1) My CSS challenge. Create custom checkboxes and radio buttons using the attribute selector 2) My CSS challenge "Set styles for the disabled buttons without CSS overriding" 3) My CSS challenge. Align the avatar inside of the comment component using the margins 4) My CSS challenge. Use background-position syntax to customize the select element

Posted on by:

melnik909 profile

Stas Melnikov

@melnik909

I help people to learn new things about HTML and CSS on Patreon platform 👉 https://www.patreon.com/posts/34774556

Discussion