html - 圆形复选框边框不会改变

Question

因此，我正在尝试更改代码中圆 Angular checkbox 的 border。我想让 border 变细。

.roundedOne {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 0px;
  top: 1100px;
  background: white;
  background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%);
  background: linear-gradient(to bottom, white 0%, black 0%, black 80%);
  border-radius: 100px;
}
.roundedOne label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background: white;
  border-radius: 100px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #19B5FE;
  opacity: 0;
  border-radius: 100px;
}
.roundedOne label:hover::after {
  opacity: 0;
}
.roundedOne input[type=checkbox] {
  visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="roundedOne">
  <input type="checkbox" value="None" id="roundedOne" name="check" checked />
  <label for="roundedOne"></label>
</div>

如何使黑色的外部 border 变薄？另外我该如何更改它，因为现在当我进入页面时它已经填满了，我希望当有人进入页面时它是空的。

这是我想要的:

Answer 1

更改 .roundedOne 的 width/height(更新为单个 div)然后更改top/left 使 input 在黑色背景中居中。

去掉HTML中的checked，进入页面时不勾选。

body {
  background: gray;
  margin: 0
}
div {
  width: 26px;
  height: 27px;
  position: relative;
  left: 0;
  /*top: 1100px; */
  background: white;
  background: -webkit-linear-gradient(top, white 0%, black 0%, black 80%);
  background: linear-gradient(to bottom, white 0%, black 0%, black 80%);
  border-radius: 100px;
}
label {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 100px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
label:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #19B5FE;
  opacity: 0;
  border-radius: 100px;
}
span {
  display: inline-block;
  margin-left: 30px;
  min-width:100px
}
label:hover::after {
  opacity: 0;
}
input[type=checkbox] {
  visibility: hidden;
}
input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div>
  <input type="checkbox" value="None" id="roundedOne" name="check" />
  <label for="roundedOne">
    <span>Checkbox 1</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedTwo" name="check" />
  <label for="roundedTwo">
    <span>Checkbox 2</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedThree" name="check" />
  <label for="roundedThree">
    <span>Checkbox 3</span>
  </label>
</div>
<div>
  <input type="checkbox" value="None" id="roundedFour" name="check" />
  <label for="roundedFour"><span>Checkbox 4</span>
  </label>
</div>