Estilos CSS para input file y radio button

En este artículo se explica como cambiar los estilos de input file y radio button en un formulario, aplicando CSS y 2 líneas de JavaScript

En este post se explica cómo añadir estilos CSS para cambiar la visualización por defecto de algunos elementos. Recientemente, en un proyecto que incluye varios formularios de contacto hemos tenido que adaptarlos al diseño propuesto. Maquetar un formulario, por lo general, no resulta una tarea muy difícil, pero existen algunos elementos que no se pueden estilar fácilmente, ya que obtienen el estilo por defecto dependiendo del sistema operativo que se utilice.

Algunos resultan fáciles de cambiar, como los input text, o los button, o incluso el submit, pero hay otros como los radio button o los input file que ya dan más quebraderos de cabeza.

Aquí explicaré el proceso de maquetación de un formulario simple con 3 radio buttons y un input file de manera que pasemos de ver un formulario sin ningún tipo de estilo como este:

a un formulario algo más decente, con estilos propios en los radio buttons, en el file uploader y el botón de enviar

El procedimiento para maquetar esos elementos de sistema (radio button y file uploader) puede parecer un poco radical, ya que básicamente consiste en ocultar los elementos por defecto y crear unos nuevos a los que se les aplicará el estilo, pero de momento no hay otra forma de estilarlos.

Radio button

Lo primero de todo es añadir una etiqueta <span>, ya que será justamente esta etiqueta, la que una vez estilada sustituirá al radio button de sistema. Luego se estila con CSS.

Se oculta el botón de sistema:

.radiobtn {
display: none;
}

Aquí se aliena el margen de la lista a la izquierda y se indica que habrá un ítem por línea:

.buttons {
margin-left: -40px;
}
.buttons li {
display: block;
}

Por defecto, los radio button se pueden seleccionar haciendo clic sobre el propio radio button o, en su etiqueta asociada, pero como se han ocultado y reemplazado por <span>, al hacer clic sobre los <span> no ocurre nada (sólo son seleccionables haciendo clic en la etiqueta). Hay 2 opciones para seleccionar los nuevos radio button haciendo clic en ellos: por JavaScript o modificando el área de actuación de sus etiquetas asociadas. Aquí se ha optado por la segunda opción, ya que sólo implica tocar CSS. Se añade un padding suficiente para que cubra el span, y un margin negativo para desplazarlo a su posición original. De esta forma, al hacer clic en el nuevo radio button, en realidad se está haciendo clic en su etiqueta asociada.

.buttons li label{
padding-left: 30px;
position: relative;
left: -25px;
}
.buttons li label:hover {
cursor: pointer;
}

Se define un estilo cuadrado para los radio button:

.buttons li span {
display: inline-block;
position: relative;
top: 5px;
border: 2px solid #ccc;
width: 18px;
height: 18px;
background: #fff;
}

Finalmente de define el relleno del recuadro cuando esté seleccionado:

.radiobtn:checked + span::before{
content: '';
border: 2px solid #fff;
position: absolute;
width: 14px;
height: 14px;
background-color: #c3e3fc;
}

Formulario

Para estilar el formulario se hará de forma similar:

• Se oculta el botón input de sistema,
• Se añade una etiqueta <label> y se asocia al input, para que al hacer clic sobre el label se abra el selector de ficheros.
• Hay que añadir también un <div> vacío que es dónde se añadirá el texto con la ruta del documento seleccionado. Para rellenar el div debe hacerse con Javascript.

Igual que antes, lo primero es ocultar el botón de upload de sistema:

.upload {
display: none;
}

A continuación se asigna un ancho y alto a la caja del uploader, y se usa display flex para alinear los elementos:

.uploader {
border: 1px solid #ccc;
width: 300px;
position: relative;
height: 30px;
display: flex;
}

Se define el acho del div dónde irá el texto con la ruta del fichero. Si la ruta resulta ser muy larga, se añaden las propiedades overflow: hidden para que la ruta quede cortada visualmente y no se sobreponga al label, y text-overflow: ellipsis para convertir los 3 últimos caracteres en tres puntos suspensivos:

.uploader .input-value{
width: 250px;
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
}

Finalmente se da estilo al label para que tenga un icono de carpeta:

.uploader label {
cursor: pointer;
margin: 0;
width: 30px;
height: 30px;
position: absolute;
right: 0;
background: #c3e3fc url('https://www.interactius.com/wp-content/uploads/2016/08/folder.png') no-repeat center;
}

Submit

El botón de enviar es sencillo de estilar. En este caso únicamente se le ha cambiado el estilo y se le ha añadido una etiqueta con un icono “>”. Este icono se puede conseguir con una imagen de fondo (igual que en el label del apartado anterior), con una fuente o generándolo por CSS, como se ha hecho.
Se transforman las letras a mayúsculas, se le da tamaño y color y un cambio de color en el evento hover:

.submitbtn {
text-transform: uppercase;
background-color: #1f659b;
border-radius: 0;
font-weight: bold;
width: 90px;
border: none;
height: 30px;
color: #fff;
}
.submitbtn:hover {
color: #c3e3fc;
}

Se da estilo al para conseguir el icono “>”:

.form-arrow{
position: relative;
}
.form-arrow::before{
content: '';
width: 8px;
height: 8px;
border: 2px solid #fff;
border-bottom-color: transparent;
border-left-color: transparent;
display: block;
transform: rotate(45deg);
position: absolute;
top: 20%;
right: 10px;
}

Se le da estilo al para que cambie de color en el evento hover del botón:

.submitbtn:hover + span.form-arrow::before {
border: 2px solid #c3e3fc;
border-bottom-color: transparent;
border-left-color: transparent;
}

Finalmente se añade el script para que capture el valor del input en el evento change y escriba la ruta del fichero en el div añadido:

$('#file_1').on('change',function(){
$('#inputval').text( $(this).val());
});

Aquí se puede ver el resultado y el código completo:

Conclusión

Como se ha visto, aunque no resulte trivial, se pueden simular un cambio de estilo incluso de los elementos de sistema. Hay que tener en cuenta que, aunque el formulario quede más agradable a la vista, no siempre es una buena práctica hacer este tipo de cambios, ya que de esta forma se pierde accesibilidad y puede que los estilos no sean compatibles con todos los navegadores. Así que es muy importante valorar los pros y contras y tener en cuenta a los usuarios finales de la aplicación.