用CSS 3花哨的单选按钮对齐标签

我有以下的单选按钮，我需要更大的圆圈是38px用CSS 3花哨的单选按钮对齐标签

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，我该如何调整标签所以它与中心对齐并推到了圆圈的右侧？

来源

2017-07-25 dagda1

如果这些答案的人帮助解决您的问题请标明一个所接受，这样其他人同样的问题，知道哪个答案是正确的！ :) –

也许你的代码是过于复杂的问题;因为你希望输入更大，也许你应该把大小等放在输入而不是标签上？

查看片段（自编辑以来，无线电变为蓝色，改编自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; 
 
}

<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>

来源

2017-07-25 22:03:51

https://jsfiddle.net/RachGal/y25vyn9h/ –

添加.container{ line-height:38px}有它为中心（它似乎是已经右侧）

https://jsfiddle.net/8gubpzhq/

将其移动到正确的内容添加到该

.label { 
    font-weight: normal; 
    color: #333; 
    padding-left:5px;//add this line 
}

https://jsfiddle.net/vszuu535/

来源

2017-07-25 21:29:37

是否可以将标签移动到右侧？ – dagda1

是的，检查我的答案 –

这是正确的答案。 – jhpratt

您可以将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%; 
 
}

<div class="container"> 
 
    <input type="radio" id="radio1" value="on"> 
 
    <label for="radio1" class="label">Yes</label> 
 
</div>

来源

2017-07-25 21:33:30

用CSS 3花哨的单选按钮对齐标签

回答

相关问题