div+css中将默认的单选按钮样式(圆的)变成正方形的样式怎么写?

html-css08

div+css中将默认的单选按钮样式(圆的)变成正方形的样式怎么写?,第1张

1、首先打开hbuilder软件,新建几个默认的复选框。

2、然后在上方的style标签设置input的样式,先设置input的display属性为none,将默认的单选框去掉,在设置一下各个单选框的margin的距离。

3、接着在下方继续设置样式,设置label标签的before和after伪元素,将原有before的单选框选中状态的属性“checked+label”设置变为红色实心框,同时未选中的状态的“label::after”为白色空心方框。

4、最后打开浏览器,即可看到设置好的样式,其中被选中的是红色的实心方框,没被选择的则是没有颜色的方框。

设置矩形边框 :border : 1px solid #000000

添加文字:

<ul>

<li>九寨沟</li>

<li>黄山风景区</li>

。。。。。

。。。。。

。。。。。

</ul>

根据实际写N对li即可

希望可以帮到你~