好看的单选框css样式
时间: 2023-10-28 19:06:59 浏览: 54
好看的单选框CSS样式有很多种选择。以下是几个常见的好看的单选框CSS样式:
1. 方形风格:
```
<input type="radio" class="square-radio" id="radio1" name="radios">
<label for="radio1"></label>
```
CSS样式:
```
.square-radio {
display: none;
}
.square-radio + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
.square-radio + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
}
.square-radio:checked + label:before {
background-color: #ccc;
}
```
2. 圆形风格:
```
<input type="radio" class="circle-radio" id="radio2" name="radios">
<label for="radio2"></label>
```
CSS样式:
```
.circle-radio {
display: none;
}
.circle-radio + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
.circle-radio + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
}
.circle-radio:checked + label:before {
background-color: #ccc;
}
```
3. 扁平风格:
```
<input type="radio" class="flat-radio" id="radio3" name="radios">
<label for="radio3"></label>
```
CSS样式:
```
.flat-radio {
display: none;
}
.flat-radio + label {
position: relative;
padding-left: 30px;
cursor: pointer;
}
.flat-radio + label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 2px solid #ccc;
background-color: #fff;
}
.flat-radio:checked + label:before {
background-color: #ccc;
}
```
希望以上几个样式对您有帮助。如果您想了解更多关于单选框CSS样式的信息,请告诉我。