I've implemented custom radio buttons using CSS that hide the original ones and utilize the LABEL tag to display images instead. However, I'm facing an issue where it conflicts with labels on textboxes as well.
Since I have a large number of radio buttons, adding a class to each one isn't ideal. Is there a way to modify the CSS so it only affects the LABEL tags for the checkboxes/radio buttons?
Alternatively, I could consider removing the labels from the textboxes since they don't require clickability, but I'd like to explore other solutions too.
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;
}