¿Se puede poner texto a un input type radio? – html css bootstrap

Pregunta:


Esta pregunta ya tiene una respuesta aquí:

Tengo un formulario con varios inputs tipo radio (solo se puede seleccionar uno).

El código es el siguiente:

<div class="form-group">
                <label><strong>Visible</strong></label><br>
                @if ($employee->public==1)
                <p style="display:inline;"></p><input type="radio" name="public" value="1" class="visible" checked>
                <p style="display:inline;"></p><input type="radio" name="public" value="0" class="novisible">
                @elseif ($employee->public==0)
                <p style="display:inline;"></p><input type="radio" name="public" value="1" class="visible">
                <p style="display:inline;"></p><input type="radio" name="public" value="0" class="novisible" checked>
                @endif
</div>

Es un formulario para indicar si la ‘data’ es visible o no.

La vista se ve así, si esta seleccionado que NO es visible:

introducir la descripción de la imagen aquí

Si esta seleccionado que SI es visible:

introducir la descripción de la imagen aquí

El CSS es el siguiente:

input[type=radio]{
    &.visible{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    height: 30px;
    width: 60px;
    background: grey;
    border-radius: 10px;
    margin: 0px;
    }
    &.visible:checked{
        background: #5cb85c; 
    }

}
input[type=radio]{
    &.novisible{
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        height: 30px;
        width: 60px;
        background: grey;
        border-radius:10px;
        margin:0px;
    }
    &.novisible:checked{
        background: #d9534f;
    }
}

¿Hay alguna manera posible de poner un texto al input? ¿Tal vez la mejor opción es hacer botones bootstrap y ‘hacer que sean type radio’?

Gracias.

Preguntado por: Lluís Puig Ferrer

Asier Villanueva

La forma más sencilla es asociar labels a los inputs radio y ocultar los input. De esta forma puedes formatear como quieras los labels y al hacer click sobre estos se activarán y desactivarán los inputs:

input[type=radio]{
  display: none;
}
input[type=radio]+label{
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
    border-radius: 10px;
    margin: 0px;
    background: grey;
}
input[type=radio].visible:checked+label{
    background: #5cb85c; 
}
input[type=radio].novisible:checked+label{
        background: #d9534f;
}
<div class="form-group">
    <label><strong>Visible</strong></label><br>
    <input type="radio" name="public" id="public1" value="1" class="visible" checked>
    <label for="public1">Sí</label>
    <input type="radio" name="public" id="public0" value="0" class="novisible">
    <label for="public0">No</label>
</div>

Fuente

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *