change checkbox background color

I gave checkboxes to the classes of my checkboxes and when the checkbox is checked in css, the background color is normally blue, but I want to make it red for example, how do I do that?

 <div class="container-food">
                    <div class="card">
                        <input id="red" class="checkbox" type="checkbox">
                        <p class="count">1 and 1/2 cups (150g) <b>graham cracker crumbs</b> (about 10 full sheet
                            grahamcrackers) </p>
                    </div>
                    <div class="card">
                        <input class="checkbox" type="checkbox">
                        <p class="count">5 Tablespoons (70g) <b>unsalted butter</b>, melted</p>
                    </div>
                    <div class="card">
                        <input class="checkbox" type="checkbox">
                        <p class="count">1/4 cup (50g) <b>granulated sugar</b></p>
                    </div>
                </div>

css;

.checkbox:checked {
background-color: red; /*not worked*/
height: 10px; /*worked*/

}

to check if the problem is in the selectors

.checkbox:checked{

height:10px;

}

I tried your code and it worked. This way, I realized that the problem is not in the selectors. but background-color:red; it didn't work when i gave it.