I cannot create a checkbox in CSS

I am making a CSS style template and I so far have a switch slider and a button. The styles for the switch and the button are in separate CSS files and are being referenced via the index.html file.
The problem is I have been trying to create a rounded checkbox with a blue background, and I cannot get it to show in my page. How can I fix this problem?
Here is my page link: https://replit.com/@OSoft/OSoft-Styles?v=1

Take a look at How To Create a Custom Checkbox and Radio Buttons

Okay that sort of worked. I wanted to redo it so that I only had one checkmark instead of 4. But why is there some sort of blue thing, or checkbox underneath our logo?
Please check the code again and see if it’s a problem on the checkbox.css file or the index.html file at the bottom.
Screen Shot 2023-01-09 at 8.36.35 AM

I can’t see it when I view the page

Not anymore, no. That is because I extended the header to cover up the default checkbox.

You want to add appearance: none; to the element to hide it.

I would make a checkbox by:

    appearance: none;
    background-color: #fff;
    border:1px solid #ccc;
    cursor: pointer;
    transition: .4s;

    background-color: #ffc300;
    background-image: url("tick.svg");

And the output would be
Screenshot 2023-01-09 7.32.28 PM

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.