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

html-css021

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

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

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

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

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

这个不是样式决定的，是有 type决定的

<input type="***" >

type="radio" 单选按钮

type="checkbox" 复选框

下拉列表则是如下形式出现的

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

固定尺寸就好做

<div style="background-color:#CCCCCC width:200px height:200px position:relative">

<div style=" height:30px width:120px position:absolute top:calc(50% - 15px) left:calc(50% - 60px) line-height:30px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>

<br />

<br />

<div style="background-color:#CCCCCC width:200px height:115px padding-top:85px">

<div style=" height:30px width:120pxmargin-left:40px line-height:30px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>

<br />

<br />

<div style="background-color:#CCCCCC width:200px height:200px">

<div style=" height:30px width:120px line-height:30px float:left margin-left:40px margin-top:85px background-color:#FFFFFF">

<span>查找</span> <span>替换</span> <span>删除</span>

</div>

</div>