Стилизация радио-кнопки с помощью CSS - проблема

Question

Стилизация радио-кнопки с помощью CSS - проблема

0

Привет, я пытаюсь скрыть переключатель (круглый круглый диск) и использовать вместо него изображение.

Я смог сделать это для одного набора переключателей, но второй набор переключателей в другой строке просто не работает. Кроме того, при выборе одной радиокнопки во второй строке выбирается переключатель из первой строки.

Пожалуйста, взгляните на следующую ссылку.

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>

uttamcafedeweb 08 янв. 2014, в 20:00

Источник

0

Пожалуйста, прочтите это и исправьте ваш вопрос, прежде чем кто-то закроет его: meta.stackexchange.com/questions/125997/…
Diodeus - James MacFarlane 08 янв. 2014, в 19:05

Теги:

javascript

jquery

html

css

css3

2 ответа

Ещё вопросы

Пожалуйста, прочтите это и исправьте ваш вопрос, прежде чем кто-то закроет его: meta.stackexchange.com/questions/125997/…

frederickf · Answer 1 · 2014-01-08T18-13-00.000Z

Первая проблема заключается в том, что вы дублируете значения атрибутов id на входах.

<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]">

Как правило, ни один из двух элементов не должен иметь один и тот же id и каждый вход должен иметь уникальный id потому что это означает, что атрибут for на ярлыке говорит им обособленно. Итак, дайте каждому вводу уникальный id и используйте правильный id в качестве значения в атрибуте for соответствующих меток.

Во-вторых, входы переключателей сгруппированы по их атрибуту name. Входы с таким же именем будут находиться в одной и той же группе, и может быть выбран только один радиокнопка ввода группы. Вам нужно разбить их на три группы по имени на основе HTML по этой ссылке. Например, первая группа может быть примерно такой:

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

и соответствующая метка для этого ввода будет

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

Конечно, вам нужно придумать систему именования, которая работает для вашего приложения. Это всего лишь гипотетические примеры.

AvrilAlejandro · Answer 2 · 2014-01-08T16-30-00.000Z

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