I cannot create a checkbox in CSS

[OSoft]

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

[CodingCactus]

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

[OSoft]

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.

[CodingCactus]

I can’t see it when I view the page

[OSoft]

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

[GoodVessel92551]

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

[GoodVessel92551]

I would make a checkbox by:

input[type="checkbox"]{
    appearance: none;
    width:30px;
    height:30px;
    background-color: #fff;
    border:1px solid #ccc;
    cursor: pointer;
    border-radius:3px;
    transition: .4s;
}

input[type="checkbox"]:checked{
    background-color: #ffc300;
    background-image: url("tick.svg");
}

And the output would be