CODEWITHSUNDEEP
javascriptjqueryhtmlcss
uttamcafedeweb
uttamcafedeweb

Reputation: 73

Styling Radio Button with CSS - got a issue

Hello I am trying to hide the radio button (the round circular disk) and use image instead of it.

I was able to do so for one set of radio button but the second set of radio buttons in another row simply doesnt work. On top of that, when one radio button is selected in the second row, the radio button from the first row is selected.

Please take a look at the following link.

http://thectiweb.com/booknow/

<table class="option-image">
                <tbody>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1163" value="1163" name="option[152]">
                        <label for="option-value-1163"><img alt="Antique White Embossed" src="img/carpet.png"></label></td>
                        <td><label for="option-value-1163">Carpet Cleaning </label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1162" value="1162" name="option[152]">
                        <label for="option-value-1162"><img alt="Natural" src="img/maintenance.png"></label></td>
                        <td><label for="option-value-1162">Home Maintenance</label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1161" value="1161" name="option[152]">
                        <label for="option-value-1161"><img alt="Cherry Embossed" src="img/painting.png"></label></td>
                        <td><label for="option-value-1161">Painting </label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1160" value="1160" name="option[152]">
                        <label for="option-value-1160"><img alt="Cool White" src="img/safety.png"></label></td>
                        <td><label for="option-value-1160">Safety Issues</label></td>
                    </tr>

                </tbody>
            </table>

Upvotes: 0

Views: 459

Answers (2)

frederickf
frederickf

Reputation: 1531

First problem is that you're duplicating the id attribute values on the inputs.

<table class="option-image">
    <tbody>
        <tr>
        <td class="product-info" style="width: 1px;">
        <input type="radio" id="option-value-1163" value="1163" name="option[152]">

<table class="option-image1">
    <tbody>
        <tr>
            <td class="product-info" style="width: 1px;">
            <input type="radio" id="option-value-1163" value="1163" name="option[152]">

In general no two elements should have the same id and each input needs to have a unique id because that is how the for attribute on the label tells them apart. So, give each input a unique id and use the correct id as the value in the for attribute in the corresponding labels.

Second, radio button inputs are grouped by their name attribute. Inputs with the same name will be in the same group, and only one radio button input a group can be selected. You need to break them up into three groups by name based on the HTML at that link. For example the first group might be something like:

    <input type="radio" id="typeOfService-1163" value="1163" name="typeOfService">

and the corresponding label for that input would be

    <label for="typeOfService-1163">One Bedroom Apt </label>

Of course, you'll need to come up with a naming system that works for your app. These are just hypothetical examples.

Upvotes: 1

alessandrio
alessandrio

Reputation: 4370

html

<input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" /><label for="radio1" class="css-label"></label><input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked"/><label for="radio2" class="css-label"></label><input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" /><label for="radio3" class="css-label"></label>

css

label {margin-right:20px;}
input[type=radio].css-checkbox {
    display:none;
}

input[type=radio].css-checkbox + label.css-label {
    padding-left:240px;
    height:240px; 
    display:inline-block;
    background-repeat:no-repeat;
    background-position: -150 -50;
    vertical-align:middle;
    cursor:pointer;
}

input[type=radio].css-checkbox:checked + label.css-label {
    background-position: -410 -309px;
}

label.css-label {
    background-image:url(http://erretres.com/drivenbydesign/wp-content/uploads/2013/06/icons2.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

Related Questions