css单选框打勾

CSS单选框打勾是一个很常见的效果，可以让用户方便地选择需要的选项，本文将介绍如何使用CSS制作单选框打勾效果。

/* 定义单选框样式 */
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    outline: none;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
}

/* 定义打勾样式 */
input[type="radio"]:checked::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #2196f3;
    position: absolute;
    top: 4px;
    left: 4px;
}

/* hover效果 */
input[type="radio"]:hover {
    border-color: #2196f3;
}

/* focus效果 */
input[type="radio"]:focus {
    Box-shadow: 0 0 0 3px rgba(33,150,243,0.3);
}

以上就是CSS单选框打勾的实现方式，通过伪元素before实现画圆和打勾的效果，同时通过伪类checked判断单选框是否被选中来控制打勾的显示。

在实际使用过程中，还可以根据需要进行样式的调整，比如更改打勾颜色、大小等，以达到更好的视觉效果。