Ответ 1

Пусть они просты, не так ли. Прежде всего, используя чистый HTML + CSS:

<div id="emotion">
    <input type="radio" name="emotion" id="sad" />
        <label for="sad"><img src="sad_image.png" alt="I'm sad" /></label>

    <input type="radio" name="emotion" id="happy" />
        <label for="happy"><img src="happy_image.png" alt="I'm happy" /></label>
</div>

Это ухудшится, если нет JavaScript. Используйте атрибуты id и for, чтобы связать ярлык и радиообъект так, чтобы при выборе изображения соответствующая радиообъектка была заполнена. Это важно, потому что нам нужно скрыть реальный радиобудильник с помощью JavaScript. Теперь для некоторой доброты jQuery. Прежде всего, создадим CSS, который нам понадобится:

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#emotion label {
    display: inline-block;
    cursor: pointer;
}

#emotion label img {
    padding: 3px;
}

Теперь для JavaScript:

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

Причина, по которой мы не используем display: none здесь, относится к причинам доступности. Смотрите: http://www.jsfiddle.net/yijiang/Zgh24/1 для живой демонстрации, с чем-то более фантастическим.

Ответ 2

Вы можете воспользоваться CSS3, чтобы сделать это, поместив переключатель ввода по умолчанию с правилами CSS3:

.class-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

И затем используя метки для изображений в качестве следующих демонстраций:

JSFiddle Demo 1

JSFiddle Demo 2

Gist - Как использовать изображения для радиокнопки

Ответ 3

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

<form action="" method="post">
    <fieldset>
       <input type="radio" name="feeling" id="feelingSad" value="sad" /><label for="feelingSad"><img src="path/to/sad.png" /></label>
       <label for="feelingHappy"><input type="radio" name="feeling" id="feelingHappy" value="happy" /><img src="path/to/happy.png" /></label>
    </fieldset>
</form>

Ответ 4

Вот чистое решение HTML + CSS.

HTML:

<div class="image-radio">
  <input type="radio" value="true" checked="checked" name="ice_cream" id="ice_cream_vanilla">
  <label for="ice_cream_vanilla">Vanilla</label>
  <input type="radio" value="true" name="ice_cream" id="ice_cream_chocolate">
  <label for="ice_cream_chocolate">Chocolate</label>
</div>

SCSS:

  // use an image instead of the native radio widget
.image-radio {   
  input[type=radio] {
    display: none;
  }
  input[type=radio] + label {
    background: asset-url('icons/choice-unchecked.svg') no-repeat left;
    padding-left: 2rem;
  }
  input[type=radio]:checked + label {
    background: asset-url('icons/choice-checked.svg') no-repeat left;
  }
}

Ответ 5

Я редактировал одно из предыдущих сообщений. Теперь это более просто и прекрасно работает.

<input style="position: absolute;left:-9999px;" type="radio" name="emotion" id="sad" />
<label for="sad"><img src="red.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm sad" /></label>

<input  style="position: absolute;left:-9999px;" type="radio" name="emotion" id="happy" />
<label for="happy"><img src="blue.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm happy" /></label>

Ответ 6

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

Вы можете имитировать это, однако, спрятав радиокнопки и отображая только изображение, как в.

<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>

Ответ 7

Используйте jQuery. Держите свои элементы флажка скрытыми и создайте список, подобный этому:

<ul id="list">
    <li><a href="javascript:void(0)" id="link1">Happy face</a></li>
    <li><a href="javascript:void(0)" id="link2">Sad face</a></li>
</ul>

<form action="file.php" method="post">
    <!-- More code -->
    <input type="radio" id="option1" name="radio1" value="happy" style="display:none"/>
    <input type="radio" id="option2" name="radio1" value="sad" style="display:none"/>
    <!-- More code -->
</form>

<script type="text/javascript">
$("#list li a").click(function() {
    $('#list .active').removeClass("active");
    var id = this.id;
    var newselect = id.replace('link', 'option');
    $('#'+newselect).attr('checked', true);
    $(this).addClass("active").parent().addClass("active");
    return false;
});
</script>

Этот код добавит проверенный атрибут к вашим радиовводам в фоновом режиме и назначит класс активным для ваших элементов списка. Не используйте встроенные стили, конечно, не забудьте включить jQuery, и после его настройки все должно закончиться.

Ура!

Ответ 8

другой альтернативой является использование замены формы script/library. Обычно они скрывают исходный элемент и заменяют их div или span, которые вы можете стилизовать любым способом.

Примеры:

http://customformelements.net (на основе mootools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html

Ответ 9

Столкнувшись с той же проблемой, я создал простой плагин jQuery http://xypaul.github.io/radioimg.js/

Он работает с использованием скрытых радиокнопок и ярлыков, содержащих изображения, как показано ниже.

<input type="radio" style="display: none;" id="a" />
<label for="a">
   <img class="" />
</label>