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

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

我还想删除选中复选框时出现的轮廓

我试图让复选框看起来像这样

添加以下样式没有帮助

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

注意:影子来自另一个class

Answer 1

A checkmark doesn't appear

这不会出现，因为您添加了 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"/>

I would also like a very thin border of a different color than the default border.

简单 - 只需添加 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"/>

I would also like to remove this outline that appears when the checkbox is focused

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"/>

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

CSS custom style checkbox: Make the checkmark appear and (remove the focus styling)

css

checkbox

focus