CODEWITHSUNDEEP
css
Daniel Kalfa
Daniel Kalfa

Reputation: 78

change the background inside checkbox to be a circle

I have a custom checkbox and I rounded the corners with border_radius and I want the inner section to be also rounded.

Images side-by-side: checkbox when unchecked and checkbox when checked
checkbox when not checked checkbox when checked

My CSS code:

.checkbox {
  text-align: center;
  appearance: none;
  height: 31px;
  width: 31px;
  padding: 10px;
  margin-right: 12px;
  border: 3px solid #D6D6D6;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(90deg, #F2F2F2 50%, #F2F2F2 50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

.checkbox:checked {
  background: linear-gradient(90deg, black 50%, black 50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

Upvotes: 1

Views: 845

Answers (2)

Temani Afif
Temani Afif

Reputation: 273750

Rely on background-clip

.checkbox {
  text-align: center;
  appearance: none;
  height: 31px;
  width: 31px;
  padding: 6px; /* adjust this to control the space between border and background */
  margin-right: 12px;
  border: 3px solid #D6D6D6;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f2f2f2;
  background-clip: content-box;
  box-sizing:border-box;
}

.checkbox:checked {
  background-color: black;
}
<input type="checkbox" class="checkbox" />

Upvotes: 0

TechySharnav
TechySharnav

Reputation: 5084

You need to use radial-gradient() to make it rounded.

.checkbox {
    text-align: center;
    appearance: none;
    height: 31px;
    width: 31px;
    padding: 10px;
    margin-right: 12px;
    border: 3px solid #D6D6D6;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at center, #f2f2f2 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}

.checkbox:checked{
    background: radial-gradient(circle at center, black 50%, transparent 50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
<input type="checkbox" class="checkbox" />

Upvotes: 2

Related Questions