更改复选框的颜色和边框css

Question

我需要一个背景色为白色而没有曲线的复选框

我试过

.cb {
  background-color: white;
  border: 1px;
}

<input type="checkbox" class="cb">Normal
<input type="checkbox" class="cb">power
<input type="checkbox" class="cb">Admin

但我不能得到defualt复选框只是可能像上面的图像

Answer 1

尝试使用CSS Checkbox配置您的样式。我认为您可以在那里获得最个性化的复选框样式，因为您可以决定复选框的样式。

Screenshot from the page

Answer 2

您需要隐藏浏览器呈现的默认复选框并显示自定义复选框。

下面是一个使用:before伪元素的简单示例。

＆＃13;

＆＃13;

.cb {
  display: none;
}
label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}
input[type=checkbox]:checked + label:before,
label:hover:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

＆＃13;

<input type="checkbox" class="cb" id="check1">
<label for="check1">Normal</label>
<br>
<input type="checkbox" class="cb" id="check2">
<label for="check2">Power</label>
<br>
<input type="checkbox" class="cb" id="check3">
<label for="check3">Admin</label>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用css :after和:before完成此操作，我已添加以下代码段。

＆＃13;

＆＃13;

   
.cb {
  width:50px;
  height:50px;
  position: relative;
  margin: 20px 5px;
  background: white;

  label {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    left: 4px;
    cursor: pointer;
    background: linear-gradient(top, #222 0%, #45484d 100%);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    &:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: $activeColor;
      background: linear-gradient(top, $activeColor 0%, $darkenColor 100%);
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
      opacity: 0;
    }
    &:hover::after {
      opacity: 0.3;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }   
  } 
}

＆＃13;

<input type="checkbox" class="cb">Normal
<br><input type="checkbox" class="cb">power
<br><input type="checkbox" class="cb">Admin

＆＃13;

＆＃13;

＆＃13;