自定义原生单选按钮input[type="radio"]样式的两种方式

1、可以为<label>元素添加生成性内容（伪元素），用其来设置单选按钮的样式。

2、把真正的单选按钮隐藏起来。

1、给label标签添加伪类

  需要注意的是，选中时使用background-clip裁剪内容时，padding会让内容撑大，故width、height要相应缩小。

2、隐藏原始按钮

3、注意让按钮和文字水平居中对齐

  因为input嵌套在label标签内，不是并行的关系了，给label添加伪类用不了input标签的checked属性。故考虑直接给input标签添加伪类来实现。

   给input标签添加伪类，那就不能用1中的方式隐藏原始的input的按钮，也不能使用display:none 以及opacity:0 等方式隐藏了，因为会直接隐藏到input的伪类的展示，可以通过设置input标签的width:0height:0 来实现。 按钮布局主要通过定位来实现，其他不变。

html中radio变成正方形的方法为：

1、打开编辑器，然后新建一个html文件，编写入基本的框架。

2、用form，input和label创建一个单项选择题。

3、创建一个新的css文件，并且用link标签关联HTML文件。

4、撤销一下原来按钮的样式。nput[type="radio"]{display：none即可。

写个.radio{

float:left

margin:0px

padding:0px…}//先写好打算控制的样式

在下面用到的时候就

<input

type="radio"

class="radio"

/>

---