css中按钮样式变成单选框

在CSS中，我们可以使用伪类来控制按钮的样式。其中，:checked伪类是用来控制单选框和复选框的样式的。今天我们来探讨一下如何使用CSS来让按钮样式变成单选框的效果。

<style>
  /* 隐藏原来的radio按钮 */
  input[type="radio"] {
    display: none;
  }
  /* 定义单选框样式 */
  input[type="radio"] + label {
    display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-right: 5px;
  }
  /* 定义选中单选框样式 */
  input[type="radio"]:checked + label {
    border-color: #0066cc;
    background-color: #0066cc;
    color: #fff;
  }
</style>

<div>
  <input type="radio" id="radio1" name="radio" value="1" />
  <label for="radio1">选项1</label>
  <input type="radio" id="radio2" name="radio" value="2" />
  <label for="radio2">选项2</label>
  <input type="radio" id="radio3" name="radio" value="3" />
  <label for="radio3">选项3</label>
</div> 

以上代码会显示出一个带有三个单选框的div框，但是原来的单选框样式已经被隐藏了。对于每一个单选框，我们添加了一个标签作为单选框的代替物，然后通过CSS来定义了单选框和选中单选框的样式。

总结：使用CSS把按钮样式变成单选框很容易。我们只需要把原先的单选框隐藏，然后利用伪类和标签来制作自己想要的样式即可。