css如何设置方形单选按

html-css024

css如何设置方形单选按,第1张

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、首先打开hbuilder软件,新建几个默认的复选框。

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

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

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

这个得用Html做的

<form action="" method="get">

您喜欢的水果?<br />

<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>

<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>

<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>

<label><input name="Fruit" type="checkbox" value="3" />梨 </label>

</form>