CODEWITHSUNDEEP
htmlcsscheckboxradio-button
MRC
MRC

Reputation: 553

Custom radio button, conflicts with other label tags

I have some custom radio buttons using CSS, which hide the original, and use the LABEL tag to display the image instead. The trouble is, that it works fine, but conflicts with labels on textboxes too.

I have 100's of radio buttons so I would rather not have to add a class to each one of them. Is there a way to change the CSS to only work with the LABEL tags for the radio/checkboxes?

EDIT: I could just remove the labels of the textboxes as they don't need to be clickable, but would be nice to know.

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

Upvotes: 0

Views: 379

Answers (1)

user12
user12

Reputation: 146

Kindly replace this css. Is this you want?

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

Upvotes: 1

Related Questions