css3把radio样式修改成checkbox样式

要使用CSS3将radio按钮的默认样式修改为checkbox的样式，并允许用户选择多个选项，您可以通过隐藏原生的radio按钮，并使用label标签的:before伪元素来创建自定义的checkbox样式。以下是实现这一效果的示例代码：

HTML:

<input type="radio" id="option1" name="options" value="1">
<label for="option1">Option 1</label>
 
<input type="radio" id="option2" name="options" value="2">
<label for="option2">Option 2</label>
 
<input type="radio" id="option3" name="options" value="3">
<label for="option3">Option 3</label>

CSS:

input[type="radio"] {
  display: none;
}
 
label {
  position: relative;
  cursor: pointer;
  margin-right: 15px;
}
 
label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  background-color: transparent;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
 
input[type="radio"]:checked + label:before {
  content: "✔";
  text-align: center;
  line-height: 15px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
}

在这个例子中，每个radio按钮被隐藏，并且与它的label关联。label的:before伪元素创建了一个自定义的checkbox样式。当radio按钮被选中时，:before伪元素会改变其内容，显示一个选中的标记，从而允许用户选择多个选项。