我有以下单选按钮,我需要更大的圆圈为38px
input[type=radio] {
visibility: hidden;
}
.label {
font-weight: normal;
color: #333;
}
.label::before {
content: '';
position: absolute;
left: 0;
width: 38px;
height: 38px;
border: 1px solid #727272;
border-radius: 50%;
}
input[type=radio]:checked+label:after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 0;
background: #0065bd;
border: none;
transform: scale(0.5);
border-radius: 50%;
}
<div class="container">
<input type="radio" id="radio1" value="on">
<label for="radio1" class="label">Yes</label>
</div>
这是fiddle,如何对齐标签,使其与居中对齐并推到圆圈右侧?
答案 0 :(得分:2)
添加.container{ line-height:38px}
让它居中(看起来它已经在右边)
https://jsfiddle.net/8gubpzhq/
将其移到右侧将其添加到
.label {
font-weight: normal;
color: #333;
padding-left:5px;//add this line
}
答案 1 :(得分:1)
您可以将line-height:40px;
添加到.label
以使其垂直居中。要将其向右移动更多,您可以添加padding-left:20px;
(您可以更改line-height
和padding-left
以满足您的需求。
input[type=radio] {
visibility: hidden;
}
.label {
font-weight: normal;
color: #333;
line-height:40px;
padding-left:20px;
}
.label::before {
content: '';
position: absolute;
left: 0;
width: 38px;
height: 38px;
border: 1px solid #727272;
border-radius: 50%;
}
input[type=radio]:checked + label:after {
content: '';
position: absolute;
width: 38px;
height: 38px;
left: 0;
background: #0065bd;
border: none;
transform: scale(0.5);
border-radius: 50%;
}
&#13;
<div class="container">
<input type="radio" id="radio1" value="on">
<label for="radio1" class="label">Yes</label>
</div>
&#13;
答案 2 :(得分:0)
也许你的代码过于复杂;如果您希望输入更大,也许您应该将大小调整等重点放在输入而不是标签上?
查看代码段(收音机现在自编辑后变为蓝色,改编自this codepen。在点击之前为灰色,在蓝色之后,居中,并从边缘缩进)。
只需注意:如果您要使用默认值(并且只有一个选项),自定义复选框可能是更合适的选择吗? (无线电按钮通常用于用户有2个或更多选择的情况,但只能选择一个)..只是一个想法。
input[type="radio"] {
display: none;
width: 38px;
height: 38px;
border: 1px solid #727272;
}
input[type="radio"]+label span {
display: inline-block;
width: 38px;
height: 38px;
margin: 9px;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
background-color: grey;
}
input[type="radio"]:checked+label span {
content="";
background: #0065bd;
}
input[type="radio"]+label span,
input[type="radio"]:checked+label span {
-webkit-transition: background-color 0.4s linear;
-o-transition: background-color 0.4s linear;
-moz-transition: background-color 0.4s linear;
transition: background-color 0.4s linear;
}
&#13;
<div class="container">
<input type="radio" id="radio1" name="radio">
<label for="radio1" class="label"><span></span>Yes</label>
<input type="radio" id="radio2" name="radio">
<label for="radio2" class="label"><span></span>No</label>
</div>
&#13;