css如何设置方形单选按

1、新建一个html文件，命名为test.html，用于讲解。

2、在test.html文件中，使用button标签创建一个按钮。

3、在test.html文件中，设置button标签的class属性为mybtn。

4、在css标签内，通过class定义button的样式，设置它的宽度为50px，高度为50px，实现正方形。

5、在css标签内，再设置在设置忽略按钮的背景颜色为红色，文字颜色为白色，按钮无边框。

6、在浏览器打开test.html文件，查看实现的效果。css是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。

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 来实现。 按钮布局主要通过定位来实现，其他不变。

---