用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花哨的單選按鈕對齊標籤

回答

相關問題