html - 自定义单选按钮，与其他label标签冲突

Question

我有一些使用 CSS 的自定义单选按钮，它们隐藏了原始按钮，并使用 LABEL 标签来显示图像。问题是，它工作正常，但也与文本框上的标签冲突。

我有 100 个单选按钮，所以我不想为每个单选按钮添加一个类。有没有办法将 CSS 更改为仅适用于单选/复选框的 LABEL 标签？

编辑:我可以删除文本框的标签，因为它们不需要可点击，但很高兴知道。

JS FIDDLE

HTML:

<input type="radio" name="question10" id="radio10c" value="radio" />
<label class="black" for="radio10c">Mostly</label>
<br/>
<input type="text">
<label>Text box label with repeated pattern of radio button on the background</label>

CSS:

input[type=radio], input[type=checkbox] {
    display: none;
}
input[type=radio]+ label, input[type=checkbox] + label {
    padding-left: 35px;
    padding-top: 2px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label {
    background-position: 0 -30px;
}
label {
    padding-bottom:2px;
    background-image: url(http://cis.kitoit.com/layouts/images/radio.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 1

请替换此 css。这是你想要的吗？

input[type=radio], input[type=checkbox] {
    display: none;
}
input[type=radio]+ label, input[type=checkbox] + label {
    padding-left: 35px;
    padding-top: 2px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label {
    background-position: 0 -30px;
}
input[type=radio] + label {
    padding-bottom:2px;
    background-image: url(http://cis.kitoit.com/layouts/images/radio.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}