Question

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

我有100个单选按钮，所以我宁愿不必为每个按钮添加一个类。有没有办法将CSS更改为仅使用收音机/复选框的LABEL标签？

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

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

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

1 个答案: