change the background inside checkbox to be a circle-CodePudding

I have a custom checkbox and I rounded the corners with border_radius and I want the inner section to br also rounded checkbox when checked

checkbox when not checked

my css is:

 .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;
}

CodePudding user response：

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"  />

CodePudding user response：

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"  />