圆角复选框边框不会更改

Question

所以我正在尝试更改我的代码中的舍入border的{​​{1}}。我想让checkbox更薄。

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>更黑，更薄？ 另外我如何更改它，因为现在当我进入页面时它已经被填充，我希望当有人进入页面时它会被填充。

这就是我想要的：

Answer 1

更改width的{​​{1}} / height（更新为.roundedOne}，然后将div / top更改为中心背景中的left黑色。

删除HTML中的input，以便在您进入页面时不进行检查。

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