的CSS樣式單選按鈕不會因爲背景圖像

Question

我使用的CSS樣式單選按鈕從http://www.csscheckbox.com/

在接下來的線上工作的問題是他們手動給單選按鈕高度（即30像素）和文本溢出。

於是，我就刪除手動高度。然後，作爲背景圖像作爲背景位置有更多的問題:(這裏使用

背景圖像是像IMG之後。

下面是CSS的腳本單選按鈕

input[type=radio].css-checkbox { 
    display:none; 
} 

input[type=radio].css-checkbox + label.css-label { 
    padding-left:35px; 
    height:30px; 
    display:inline-block; 
    line-height:30px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-size:20px; 
    vertical-align:middle; 
    cursor:pointer; 

} 

input[type=radio].css-checkbox:checked + label.css-label { 
    background-position: 0 -30px; 
} 
label.css-label { 
    background-image:url({{ URL::to('/') }}/application/assets/img/checkbox.png); 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
} 

這裏是標記

<ul> 
    <li><input type="radio" name="answer2671" id="radio12344" class="css-checkbox" value="1" /><label for="radio12344" class="css-label radGroup1">Planning and strategy</label></li> 
    <li><input type="radio" name="answer2671" id="radio12345" class="css-checkbox" value="2" /><label for="radio12345" class="css-label radGroup1">Supporting your teammates</label></li> 
    <li><input type="radio" name="answer2671" id="radio12346" class="css-checkbox" value="3" /><label for="radio12346" class="css-label radGroup1">Motivating everyone</label></li> 
    <li><input type="radio" name="answer2671" id="radio12347" class="css-checkbox" value="4" /><label for="radio12347" class="css-label radGroup1">Courage in the face of adversity</label></li> 
    </ul> 

任何形式的幫助表示讚賞！

Answer 1

刪除高度，行高並向標籤添加一些頂部和底部填充。

input[type=radio].css-checkbox + label.css-label { 
padding:20px 0 20px 35px; 
display:inline-block; 
background-repeat:no-repeat; 
background-position: 0 0; 
font-size:20px; 
vertical-align:middle; 
cursor:pointer; 
} 

Answer 2

改變你的CSS他：

ul { 
    width:240px; 
} 
li { 
    list-style-type:none; 
    padding:5px 5px; 
    margin:5px 0 20px; 
    line-height:15px 
} 
input[type=radio].css-checkbox { 
    display:none; 
} 
.quiz-question-block.qhidden { 
    display:none; 
} 
input[type=radio].css-checkbox + label.css-label { 
    padding-left:45px; 
    height:32px; 
    display:inline-block; 
    line-height:30px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    font-size:20px; 
    vertical-align:middle; 
    cursor:pointer; 
} 
input[type=radio].css-checkbox:checked + label.css-label { 
    background-position: 0 -32px; 
} 
label.css-label { 
    background-image:url('http://i.stack.imgur.com/KLQO2.png'); 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

您需要調整您的需求，我也只限於定意的形式進行可視化的寬度，但你會得到的想法

See fiddle here

編輯：另一種選擇是修改圖像，並使其在高度大，具有很大的距離b在這兩種狀態，並簡單地調整CSS到新的圖像大小