troubleshooting Question

Put check in your check box

Avatar of Jazzy 1012
Jazzy 1012 asked on
CSS
7 Comments1 Solution150 ViewsLast Modified:
<div class="row rowing">
  <div class="col-6 col-md-3">
  <p class="orange OldStandard"> Menu Filters</p>
  <a type="button" class="check">Select All </a>
  <br>
  <a type="button" class="uncheck"> Unselect All</a>
  <br>
        <input type="checkbox" class="checkbox-round" id="vegan" checked/> <label for="vegan">Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="egg-free" checked/> <label for="egg-free">Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="fish-free" checked/> <label for="fish-free">Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="tree" checked/> <label for="tree">Tree nut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="peanut" checked/> <label for="peanut">Peanut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="soy" checked/> <label for="soy">Soy-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="sodium" checked/> <label for="sodium">Low Sodium</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="protein" checked/> <label for="protein">Protein >25g</label>
          <br/>
        <input type="checkbox" class="checkbox-round" id="calories" checked/> <label for="calories">Calories  <450 calories</label>
  <br>
  
  </div>

This is my output in the image
see.pngThe orange is selected, the gray isnt selected.
Here is my css:
.checkbox-round {
    width: 13px;
    height: 14px;
    background-color: #ddd;
    border-radius: 50%;
    border: 1px solid white;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
	margin-top: 7px !important;
}

.checkbox-round:checked {
    background-color: #cf5630;
}
How can I make the selected check box look like this:
see1.png(the white check inside)
Does anyone know how?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros