Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017 ·

Elementos que se "resisten" a CSS

Con CSS podemos dar estilo a prácticamente cualquier elemento de nuestra web. Y digo prácticamente porque hay algunos elementos "rebeldes" que se nos resisten. Entre ellos se encuentran las checkbox (casillas de verificación), los radio (botones de opción) y los select (elementos desplegables y listas).

Puede que en algunos diseños el estilo "por defecto" de uno de estos elementos quede bien integrado, pero en la mayoría de los casos no. Por eso la tendencia ha sido crear este tipo de controles con elementos div o span, perdiendo por el camino la semántica, la accesibilidad y teniendo que recurrir a javascript para darles la funcionalidad que tienen por defecto.

Aquí vamos a ver una forma de conseguir dar estilo a un boton radio, manteniendo los aspectos básicos de este elemento y sin tener que recurrir a javascript, porque CSS3 es suficiente para suplir lo que debería ser un estándar, poder dar estilo a todos y cada uno de los elementos de HTML.

radio botones

Elementos HTML


<div class="container">
  <form action="#" method="post">
    <label for="radio1">
      <input id="radio1" name="grupo1" type="radio" />
      <span>Opción #1</span> 
    </label>
    
    <label for="radio2">
      <input id="radio2" name="grupo1" type="radio" />
      <span>Opción #2</span> 
    </label>  

    <label for="radio3">
      <input id="radio3" name="grupo1" type="radio" />
      <span>Opción #3</span> 
    </label>  
  </form>    
</div>

Reglas CSS


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100vh; }
body { background: steelblue; }
.container {
  width           : 100%;
  height          : 100%;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  align-items     : center;
}
form { 
  margin  : 2em; padding: 2em;
  outline : 1px solid hsla(207, 44%, 59%, 1);}
label {
  display  : block;
  margin   : 1em;
  color    : #333;
  font     : 20px sans-serif;
  position : relative;
}
/* oculta botones radios por defecto */
input[type="radio"] { opacity: 0; }

span { position: relative; }
span::before {
  content       : "";
  width         : 18px; height: 18px;
  position      : absolute;
  top           : 2px; left: -30px;
  background    : #fff;
  border-radius : 50%;
  box-shadow    : 0 0 1px 3px #fff inset,
                  0 0 0px 2px #333;
  transition    : all 0.25s ease-in-out;
}
input[type="radio"]:checked + span::before { background: #f00; }

Nota: eliminando la línea con la propiedad border-radius y cambiando el tipo de botón creamos las casillas de verificación checkbox

Etiquetas: HTML5, CSS3

Imprimir

En línea...

Hay 18 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png5.png5.png8.png7.png
Hoy ........29
Ayer .......16
Mes ........345

Domingo, 25 Junio 2017