使用css修改checkbox和radio的样式尺寸后,选择框和后面对应的文字 无法水平对齐
时间: 2024-03-11 17:49:22 浏览: 26
当使用 CSS 修改 checkbox 和 radio 样式和尺寸后,可能会导致选择框和后面对应的文字无法水平对齐。这是因为原生的选择框和自定义的选择框大小和位置不同,导致文字对齐出现问题。为了解决这个问题,可以采用以下两种方法之一:
1. 使用 `vertical-align` 属性将选择框和文字垂直对齐。示例代码如下:
```css
input[type="checkbox"],
input[type="radio"] {
display: none;
}
label.checkbox,
label.radio {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: relative;
padding-left: 30px;
cursor: pointer;
}
label.checkbox:before,
label.radio:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
transition: all 0.3s ease;
}
label.checkbox:before {
border-radius: 4px;
}
label.checkbox:after,
label.radio:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
position: absolute;
left: 4px;
top: 4px;
border-radius: 2px;
transition: all 0.3s ease;
opacity: 0;
}
label.checkbox:hover:before,
label.radio:hover:before {
border-color: #666;
}
input[type="checkbox"]:checked + label.checkbox:before,
input[type="radio"]:checked + label.radio:before {
border-color: #f00;
}
input[type="checkbox"]:checked + label.checkbox:after,
input[type="radio"]:checked + label.radio:after {
opacity: 1;
}
```
2. 将选择框和文字放在容器中,并使用 `display: flex; align-items: center;` 将其垂直对齐。示例代码如下:
```css
.container {
display: flex;
align-items: center;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
}
label.checkbox,
label.radio {
position: relative;
padding-left: 30px;
cursor: pointer;
}
label.checkbox:before,
label.radio:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
border-radius: 4px;
transition: all 0.3s ease;
}
label.checkbox:before {
border-radius: 4px;
}
label.checkbox:after,
label.radio:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
position: absolute;
left: 4px;
top: 4px;
border-radius: 2px;
transition: all 0.3s ease;
opacity: 0;
}
label.checkbox:hover:before,
label.radio:hover:before {
border-color: #666;
}
input[type="checkbox"]:checked + label.checkbox:before,
input[type="radio"]:checked + label.radio:before {
border-color: #f00;
}
input[type="checkbox"]:checked + label.checkbox:after,
input[type="radio"]:checked + label.radio:after {
opacity: 1;
}
```
以上两种方法都可以解决选择框和文字无法水平对齐的问题,根据实际情况选择其中一种即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)