复选框样式问题css

Question

我有一些复选框项目的代码，我试着让这个勾选像一个关闭图标，我不能正确地做，我怎么能使它这种类型，看图像 示例复选框

请有人帮助我，  谢谢

＆＃13;

＆＃13;

.round {
  position: relative;
}

  .round label {
  background-color: #fff;
  border: 1px solid #81bea0;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

  .round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

 .round input[type="checkbox"] {
  visibility: hidden;
}

  .round input[type="checkbox"]:checked + label {
  background-color: #54a985;
  border-color: #66bb6a;
}

 .round input[type="checkbox"]:checked + label:after {
  opacity: 1;
}

＆＃13;

<span class="chk-box01"><div class="round">
     <input type="checkbox" id="checkbox" />
     <label for="checkbox"></label>
     </div></span>

＆＃13;

＆＃13;

＆＃13;

Answer 1

#checkbox{
  display: none;
}

label[for="checkbox"]{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid pink;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
}

#checkbox:checked + label{
  background: red;
}
#checkbox:checked + label > span{
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 3px;
  background: white;
  top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  transform: rotate(45deg);
}
#checkbox:checked + label > span::before{
  content: '';
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 3px;
  background: white;
  top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  transform: rotate(90deg);
}

 <input type="checkbox" id="checkbox" />
<label for="checkbox"><span></span></label>

Answer 2

这可以作为答案的替代方案

代码示例：

set_lowercase(("A", "B", "C"))

.round {
  position: relative;
}

.round label {
  background-color: #fff;
  border: 1px solid #ff4141;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
}

.round label:before {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  border-left: none;
  content: "";
  height: 5px;
  left: 9px;
  position: absolute;
  top: 9px;
  transform: rotate(45deg);
  width: 14px;
}

.round label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  border-left: none;
  content: "";
  height: 6px;
  left: 5px;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 14px;
}

.round input[type="checkbox"] {
  visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
  background-color: #ff0000;
  border-color: #ff4141;
}

.round input[type="checkbox"]:checked+label:after {
  opacity: 1;
}

Answer 3

请参阅下文。希望这会有所帮助。

.round {
  position: relative;
}

.round label {
  border: 1px solid black;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: white;
}

.round input[type="checkbox"] {
  display: none;
}

.round input[type="checkbox"]:checked+label {
  background-color: #54a985;
  border-color: #66bb6a;
}

<span class="chk-box01">
  <div class="round">
   <input type="checkbox" id="checkbox" />
   <label for="checkbox">x</label>
  </div>
</span>

或者，您可以使用fontawesome来显示更整洁的x。但它需要额外的下载。

.round {
  position: relative;
}

.round label {
  border: 1px solid black;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: absolute;
  top: 0;
  width: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: red;
  color: white;
}

.round input[type="checkbox"] {
  display: none;
}

.round input[type="checkbox"]:checked+label {
  background-color: #54a985;
  border-color: #66bb6a;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="chk-box01">
  <div class="round">
   <input type="checkbox" id="checkbox" />
   <label for="checkbox"><i class="fa fa-times" aria-hidden="true"></i></label>
  </div>
</span>