Как мне оформить радио кнопки с изображениями - смеющийся смайлик на пользу, грустный смайлик на зло?

Question

Я хотел бы создать HTML-форму для обратной связи с пользователем.Если общая обратная связь хорошая, пользователь должен нажать на смеющийся смайлик, если общая обратная связь плохая, пользователь должен выбрать грустный смайлик.

Я думаю, что это должно быть сделано с помощью переключателей, со смайликами.вместо радио кнопок.Может быть, я ошибаюсь ...

Знаете, как мне этого добиться?

Спасибо!

Answer 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 для живого демо, с чем-то более причудливым.

Answer 2

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

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

И затем используя метки для изображений, как показано нижедемоверсии:

JSFiddle Demo 1

JSFiddle Demo 2

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

Answer 3

Вот чистое решение 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;
  }
}

Answer 4

С чистым 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>

Answer 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>

Answer 6

Изображения можно размещать вместо переключателей с помощью элементов label и span.

   <div class="customize-radio">
        <label>Favourite Smiley</label>
        <br>
        <label for="hahaha">
          <input type="radio" name="smiley" id="hahaha">
          <span class="haha-img"></span>
          HAHAHA
        </label>
        <label for="kiss">
          <input type="radio" name="smiley" id="kiss">
          <span class="kiss-img"></span>
          Kiss
        </label>
        <label for="tongueOut">
          <input type="radio" name="smiley" id="tongueOut">
          <span class="tongueout-img"></span>
          TongueOut
        </label>
    </div>

Радиокнопка должна быть скрыта,

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

Изображение можно указать в теге span,

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

Чтобы изменить изображение по щелчку переключателя, добавьте проверенное состояние к тегу ввода,

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

Если у вас есть какие-либо вопросы, обратитесь к следующей ссылке, поскольку я принял решение из блога ниже, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Answer 7

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

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

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

Answer 8

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

Примеры:

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

Answer 9

Используйте 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>

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

Ура!

Answer 10

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

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

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