html - para - formularios css plantillas

¿Cómo doy estilo a los botones de radio con imágenes? ¿Sonríe risueña para siempre? ¿Sonríe triste para mal?

Question

Me gustaría crear un formulario HTML para comentarios de los usuarios. Si la respuesta general es buena, el usuario debe hacer clic en una sonrisa sonriente, si la respuesta general es mala, el usuario debe elegir una sonrisa triste.

Creo que esto debería hacerse usando botones de opción, con los emoticonos en lugar de los botones de opción. Aunque tal vez estoy equivocado ...

¿Sabes cómo puedo lograr esto?

¡Gracias!

Answer 1

Ante el mismo problema, creé un plugin de jQuery simple http://xypaul.github.io/radioimg.js/

Funciona utilizando botones de radio ocultos y etiquetas que contienen imágenes como se muestra a continuación.

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

Answer 2

Aquí hay una solución pura de 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 3

Con html puro (sin JS), no puede sustituir un botón de radio por una imagen (al menos, no creo que pueda). Aunque puede usar lo siguiente para hacer la misma conexión con el usuario:

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

He editado una de las publicaciones anteriores. Ahora, es mucho más simple y funciona perfectamente.

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

Las imágenes pueden colocarse en lugar de los botones de opción mediante el uso de elementos de etiqueta y tramo.

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

El botón de radio debe estar oculto,

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

La imagen se puede dar en la etiqueta 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'');
}

Para cambiar la imagen al hacer clic en el botón de radio, agregue estado verificado a la etiqueta de entrada,

.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'');
}

Si tiene alguna consulta, consulte el siguiente enlace, Como he tomado la solución del siguiente blog, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

Answer 6

No puede diseñar cosas como botones de radio, casillas de verificación, barras de desplazamiento (etc.) en absoluto. Estos son nativos del sistema operativo y del navegador y no son algo que pueda manipular.

Puede simular esto, sin embargo, ocultando los botones de radio y mostrando solo una imagen como en.

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

Answer 7

Otra alternativa es usar un script / biblioteca de reemplazo de formulario. Por lo general, ocultan el elemento original y lo reemplazan con un div o un lapso, que puedes estilizar de la forma que quieras.

Los ejemplos son:

http://customformelements.net (basado en mootools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html

Answer 8

Puede aprovechar CSS3 para hacer eso, ocultando el botón de opción de entrada por defecto con las reglas de CSS3:

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

Y luego usar etiquetas para imágenes como las siguientes demostraciones:

Demostración de JSFiddle 1

Demostración JSFiddle 2

Gist - Cómo usar imágenes para botones de radio

Answer 9

Usa jQuery. Mantenga sus elementos de casilla de verificación ocultos y cree una lista como esta:

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

Este código agregaría el atributo verificado a sus entradas de radio en segundo plano y asignaría clase activa a los elementos de su lista. No use estilos en línea, por supuesto, no se olvide de incluir jQuery y todo debería salir de la caja después de personalizarlo.

¡Aclamaciones!

Answer 10

Vamos a mantenerlos simples, ¿de acuerdo? Primero, usando HTML + CSS puro:

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

Esto se degradará muy bien si no hay JavaScript. Use id y for atributos para vincular la etiqueta y el botón de radio para que cuando se seleccione la imagen, se llene el botón de radio correspondiente. Esto es importante porque tendremos que ocultar el botón de radio real usando JavaScript. Ahora por un poco de bondad jQuery. En primer lugar, crear el CSS que necesitaremos:

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

.selected {
    background-color: #ccc;
}

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

#emotion label img {
    padding: 3px;
}

Ahora para el JavaScript:

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

La razón por la que no estamos usando display: none aquí es por razones de accesibilidad. Ver: http://www.jsfiddle.net/yijiang/Zgh24/1 para una demostración en vivo, con algo más elegante.