2

Necesito cambiar un radio-button por una imagen.

<div class="column-2 filter-options-content  fixed-height ">
<div class="content-to-scroll">
    <div class="radio">
        <label for="option_115">
            <input id="option_115" name="filter_22" type="radio" data-id_searcher="2" data-id_filter="22" data-control_type="2" value="115" checked="">
            <span>Bolt In</span>
        </label>
    </div>
    <div class="radio">
        <label for="option_116">
            <input id="option_116" name="filter_22" type="radio" data-id_searcher="2" data-id_filter="22" data-control_type="2" value="116">
            <span>Weld In</span>
        </label>
    </div>
</div>

He usado este CSS pero no consigo ningún cambio:

#option_115{   
    background-image: url(img/radio.png);   
    width: 152px;   
    height 
}

Gracias.

1 respuesta 1

4

Los <input type="radio">, como casi todos los <input> dependen del navegador y/o Sistema Operativo donde se ejecuten para renderizarse. ¿Qué significa esto? Que se ven diferentes dependiendo del navegador, por lo que alterarlos directamente con CSS no suele arrojar buenos resultados.

Por lo que se suele optar es por "simularlos" con elementos que si que se pueden alterar mediante CSS, teniendo "escondido" el <input> para que funcione "desde las sombras" y siendo "marcado/desmarcado" con Javascript.

Te dejo un ejemplo:

$(function () {
  $('.control-radio-personalizado').click(function () {
    let input_radio = $(this).prev('.radio-personalizado');
    
    if (input_radio.not(':checked')) {
      input_radio.prop('checked', true);
    }
  });
  
  $('.control-radio-personalizado-imagen').click(function () {
    let input_radio = $(this).prev('.radio-personalizado');
    
    if (input_radio.not(':checked')) {
      input_radio.prop('checked', true);
    }
  });
});
.grupo-control-radio-personalizado {
    position: relative;
    padding-left: 35px;
    margin-bottom: 20px;
}

.radio-personalizado {
    display: none;
}

.control-radio-personalizado:before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 1px solid #dae1ea;
    background: #fff;
    cursor: pointer;
}

.radio-personalizado:checked + .control-radio-personalizado:after {
    content: " ";
    display: block;
    position: absolute;
    left: 1px;
    top: 1px;
    width: 17px;
    margin-left: auto;
    height: 17px;
    border-radius: 100%;
    border: 4px solid #fff;
    background: #1F74BB;
}

.radio-personalizado:checked + .control-radio-personalizado-imagen:before {
  background-image: url('https://pbs.twimg.com/profile_images/752923302000295936/QP7SrVMv_400x400.jpg');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: absolute;
  left: 0;
  top: 0;
}

.control-radio-personalizado-imagen:before {
  background-image: url('https://png.pngtree.com/png-vector/20190124/ourlarge/pngtree-x-red-cross-png-picture-red-png-image_550969.jpg');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grupo-control-radio-personalizado">
  <input type="radio" class="radio-personalizado" name="miRadio" checked="checked">
  <label class="control-radio-personalizado">Mi radio personalizado 1</label>
</div>

<div class="grupo-control-radio-personalizado">
  <input type="radio" class="radio-personalizado" name="miRadio">
  <label class="control-radio-personalizado">Mi radio personalizado 2</label>
</div>

<div class="grupo-control-radio-personalizado">
  <input type="radio" class="radio-personalizado" name="miRadio">
  <label class="control-radio-personalizado-imagen">Mi radio personalizado 3</label>
</div>

3
  • 1
    Si quisieras una imagen podrías añadirle al :before un background-image: url('ruta_de_la_imagen');, pero la esencia es la misma, un contenedor que simula el <input> y controlarlo mediante JS.
    – phpMyGuel
    Commented el 17 oct. 2019 a las 13:15
  • 1
    Edité la respuesta para añadir un radio con imagen.
    – phpMyGuel
    Commented el 17 oct. 2019 a las 13:28
  • 1 Gracias por la respuesta, pero lo q necesito es mostrar una imagen para el radio option_115 y otra distinta para el radio option_116. Se trata de un selector para dos kits distintos y mi cliente quiere mostrar una imagen para cada de kit Commented el 17 oct. 2019 a las 15:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.