Radio button 是一种用于表单的单选按钮，通常会和一些样式一起使用以增加可视化效果和用户体验。下面是一些常见的
radio button 样式示例：
1. 原生样式：
```html
<label>
<input type="
radio" name="gender" value="male">
Male
</label>
<label>
<input type="
radio" name="gender" value="female">
Female
</label>
```
2. 自定义样式：
```html
<label class="
radio-container">Male
<input type="
radio" name="gender">
<span class="
radio-checkmark"></span>
</label>
<label class="
radio-container">Female
<input type="
radio" name="gender">
<span class="
radio-checkmark"></span>
</label>
```
```css
/* 自定义样式 */
.
radio-container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
user-select: none;
}
.
radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.
radio-checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}
.
radio-container:hover input ~ .
radio-checkmark {
background-color: #ccc;
}
.
radio-container input:checked ~ .
radio-checkmark {
background-color: #2196F3;
}
.
radio-checkmark:after {
content: "";
position: absolute;
display: none;
}
.
radio-container input:checked ~ .
radio-checkmark:after {
display: block;
}
.
radio-container .
radio-checkmark:after {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
}
```
3. 使用 CSS 框架：
Bootstrap：
```html
<div class="form-check">
<input class="form-check-input" type="
radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="
radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">
Female
</label>
</div>
```
```css
/*
Bootstrap 样式 */
.form-check-input:checked ~ .form-check-label::before {
color: #fff;
border-color: #2196f3;
background-color: #2196f3;
}
.form-check-input:focus ~ .form-check-label::before {
box-shadow: 0 0 0 1px #2196f3, 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}
.form-check-label::before {
position: absolute;
top: 0.25rem;
left: -1.5rem;
display: block;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
background-color: #fff;
border: #adb5bd solid 1px;
}
.form-check-input {
position: absolute;
margin-top: 0.3rem;
margin-left: -1.6rem;
margin-right: 0.25rem;
}
```
以上是一些
radio button 样式的示例，你可以根据需要选择适合自己的样式。
6058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
