2

Tengo un problema en un estilo css ya que tengo un codigo de unos inputs radioButtons en forma de boton que al darle clic se selecciona el radioButton pero no eh podido ocultar los radioButton para que solo muestre los label como si fuera un boton este es mi codigo

introducir la descripción de la imagen aquí

CSS

.panel { margin-bottom: 0px !important; }

#donate label {
    float: left;
    width: 30px;
    height: 32px;
    margin: 4px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    overflow: hidden;
    cursor: pointer;
}

    #donate label span {
        text-align: center;
        font-size: 20px;
        padding: 3px 0px;
        display: block;
    }

    #donate label input {
        position: absolute;            
        /*top: -20px;*/
    }

#donate input:checked + span {
    background-color: #404040;
    color: #F7F7F7;
}

HTML

            <div class="col-md-4 text-center">
                <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
                <div id="donate" style="z-index: 100">
                    <label><input type="radio" name="toggle"><span><strong>N</strong></span></label>
                    <label><input type="radio" name="toggle"><span>I</span></label>
                    <label><input type="radio" name="toggle"><span><u>S</u></span></label>
                </div>
            </div>

2 respuestas 2

4

Para ocultar tu radiobutton usa la propiedad opacity para darle un valor de transparencia entre 0 y 1 siendo 1 no transparente y 0 totalmente transparente.

Agregue un ejemplo de Jquery para que vieras que si se captura la selección de un radiobutton.

$("input").change(function() {
  alert("se seleciono un radiobutton");
});
.panel {
  margin-bottom: 0px !important;
}

#donate label {
  float: left;
  width: 30px;
  height: 32px;
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: hidden;
  cursor: pointer;
}

#donate label span {
  text-align: center;
  font-size: 20px;
  padding: 3px 0px;
  display: block;
}

#donate label input {
  position: absolute;
  opacity: 0;
  /*top: -20px;*/
}

#donate input:checked+span {
  background-color: #404040;
  color: #F7F7F7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 text-center">
  <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
  <div id="donate" style="z-index: 100">
    <label><input type="radio" name="toggle"><span><strong>N</strong></span></label>
    <label><input type="radio" name="toggle"><span>I</span></label>
    <label><input type="radio" name="toggle"><span><u>S</u></span></label>
  </div>
</div>

4
  • y el valor que se selecciono en radioButton si se puede recuperar de forma normal con JQuery, o ya no se puede recuperar ese valor que se ha seleccionado en el radioButton
    – Ivxn
    Commented el 27 mar. 2018 a las 17:28
  • @Ivxn solo se cambio la opacidad si haces click si se recupera cosa que no pasaría con un display: none; que oculta el elemento. Commented el 27 mar. 2018 a las 17:30
  • 1
    @bercklynCarlosviza eso es correcto a medias, con jquery uno puede obtener el valor como lo muestro en la edición de mi respuesta y cualquier browser moderno (hace años) también envía un input con display:none. No son enviados inputs con propiedad "disabled", es solo una aclaracion para no confundir a nadie que lea ese comentario, mas allá de esta aclaración tu respuesta es valida opacity:0 también cumple con el propósito de la pregunta. Commented el 27 mar. 2018 a las 17:56
  • @LeonardoCabré Tienes razón en parte porque al tener esa estructura el input puede tranquilamente usarse display:none pero sino la tuviera no funcionaria ya que quien recibe la función click es el label y no el input porque este esta oculto. Commented el 27 mar. 2018 a las 18:07
3

puedes agregar esto:

#donate label input {
    position: absolute;            
    display:none; /* <- agregado */
}

Tambien te cambie el #donate label span para que ocupe bien todo el contenido del label.

#donate label span {
    text-align: center;
    font-size: 20px;
    padding: 5px 0px; /* <- modificado */
    display: block;
}

$("input").change(function() {
  console.log($(this).val())
});
#donate label {
    float: left;
    width: 30px;
    height: 32px;
    margin: 4px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #D0D0D0;
    overflow: hidden;
    cursor: pointer;
}

#donate label span {
    text-align: center;
    font-size: 20px;
    padding: 5px 0px;
    display: block;
}

#donate label input {
    position: absolute;            
    display:none;
}

#donate input:checked + span {
    background-color: #404040;
    color: #F7F7F7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-4 text-center">
    <label class="col-sm-12 control-label" for="email-03">Estilo de fuente:</label>
    <div id="donate" style="z-index: 100">
        <label><input type="radio" name="toggle" value="1"><span><strong>N</strong></span></label>
        <label><input type="radio" name="toggle" value="2"><span>I</span></label>
        <label><input type="radio" name="toggle" value="3"><span><u>S</u></span></label>
    </div>
</div>

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.