使用before伪元素更改input radio样式

0.默认样式和改动后效果对比

1.CSS代码

input[type="radio"]{
    position: relative;
}
input[type="radio"]::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border: 1px solid #0099ff;
}
input[type="radio"]:checked::before{
    position: absolute;
    content: "\2713";
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #0099ff;
}

将对所有类型为radio的input标签生效。也可以指定class来对某一类的input生效。

2.简要分析

实际上默认的样式还在，但它被设计的新样式覆盖了。
input[type="radio"]::before{...}设置的为单选框未被点击时样式，
input[type="radio"]:checked::before{...}’设置的是单选框被点击后的样式。
在设计这两种样式之前一定要把input[type="radio"]的position值设为relative。
"\2713"是特殊字符“✓”，在css中即用\2713表示。

懂得了更改样式的方式，相信你能设计出更好看的按钮！