CSS 自定义样式复选框：使复选标记出现并（删除焦点样式）

Question

我正在使用我在 this answer 上找到的样式设置复选框的样式

.checkbox{
    width: 25px;
    height: 25px;
    background: map-get($map: $gray, $key: 2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: map-get($map: $gray, $key: 3);
    position: relative;
    left: -5px;
    top: -5px;
    cursor: pointer;
}

虽然使用这种样式，当我选择一个框时，不会出现复选标记。我还想要一个与默认边框颜色不同的非常细的边框。

我还想移除当复选框被聚焦时出现的这个轮廓

我正在尝试让复选框看起来像这样

---

添加以下样式没有帮助

.checkbox:focus{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

---

注意：阴影来自另一个类

Answer 1

1. 没有出现复选标记

   这不会出现，因为您添加了appearance: none，它明确删除了它。我们可以使用:checked、::before 和::after 选择器添加这个复选标记，并添加宽度、高度和旋转。像这样的东西应该可以解决它（您可能需要根据您的要求对其进行一些调整）

   .checkbox {
       width: 25px; 
       height: 25px; 
       background: map-get($map: $gray, $key: 2); 
       -webkit-appearance: none; 
       -moz-appearance: none; 
       appearance: none; 
       border-color: map-get($map: $gray, $key: 3); 
       position: relative; 
       left: -5px; 
       top: -5px; 
       cursor: pointer; 
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

2. 我还想要一个与默认边框颜色不同的非常细的边框。

   简单 - 只需添加 border: 2px solid #efefef，只需将示例颜色替换为您想要的颜色

   .checkbox {
       width: 25px; 
       height: 25px; 
       background: map-get($map: $gray, $key: 2); 
       -webkit-appearance: none; 
       -moz-appearance: none; 
       appearance: none; 
       border-color: map-get($map: $gray, $key: 3); 
       position: relative; 
       left: -5px; 
       top: -5px; 
       cursor: pointer; 
       border: 1px solid #efefef;
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

3. 我还想移除选中复选框时出现的这个轮廓

   Don't.人们用它来通过键盘导航，所以当它被移除时，他们会感到恼火和困惑。

   如果必须，只需将 outline: none; 添加到 :focus 样式。但不要这样做！

   .checkbox {
       width: 25px; 
       height: 25px; 
       background: map-get($map: $gray, $key: 2); 
       -webkit-appearance: none; 
       -moz-appearance: none; 
       appearance: none; 
       border-color: map-get($map: $gray, $key: 3); 
       position: relative; 
       left: -5px; 
       top: -5px; 
       cursor: pointer; 
       border: 1px solid #efefef;
   }
   .checkbox:focus {
       outline: none; /* please don't do it! */
   }
   .checkbox:checked::before {
       content: "";
       position: absolute;
       top: 10px;
       left: 4px;
       width: 23px;
       height: 2px;
       background: #222;
       transform: rotate(-45deg);
   }
   .checkbox:checked::after {
       content: "";
       position: absolute;
       top: 15px;
       left: 2px;
       width: 7px;
       height: 2px;
       background: #222;
       transform: rotate(45deg);
   }

   <input type="checkbox" class="checkbox"/>

我想我们已经完成了！这是我们的完整代码：

.checkbox {
    width: 25px; 
    height: 25px; 
    background: map-get($map: $gray, $key: 2); 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    border-color: map-get($map: $gray, $key: 3); 
    position: relative; 
    left: -5px; 
    top: -5px; 
    cursor: pointer; 
    border: 1px solid #efefef;
}
.checkbox:focus {
    outline: none; /* please don't do it! */
}
.checkbox:checked::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 4px;
    width: 23px;
    height: 2px;
    background: #222;
    transform: rotate(-45deg);
}
.checkbox:checked::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 2px;
    width: 7px;
    height: 2px;
    background: #222;
    transform: rotate(45deg);
}

<input type="checkbox" class="checkbox"/>