由于背景图像，css样式的单选按钮不起作用

Question

我正在使用来自http://www.csscheckbox.com/ 的样式化 css 单选按钮

问题是他们手动给单选按钮高度（即 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

编辑：另一种选择是修改图像并使其高度更大，两种状态之间的间隔很大，只需将 CSS 调整为新的图像大小