La adición de casillas de verificación con estilo en HTML, así como los botones, se puede hacer muy fácilmente usando el CSS. En realidad, hay dos métodos para crear casillas de verificación con estilo. Un método está basado en imágenes y otro método se basa únicamente en CSS. Sin embargo, aquí discutiremos ambos métodos para agregar casillas de verificación con estilo.
El estilo basado en imágenes de las casillas de verificación permitirá una excelente flexibilidad. Además, el aspecto será flexible también. En este ejemplo, en realidad combinaremos tres imágenes de tres estados diferentes. Esos estados serán 'botón de radio seleccionado', 'sin marcar' junto con 'casilla de verificación seleccionada'.
El HTML del siguiente formulario se utilizará para cada botón de opción o casilla de verificación.
<div>
  <input id = "opción" tipo = "casilla de verificación" nombre = "campo" valor = "opción">
  <label for = "option"> Value </label>
</div>
En la hoja de estilo, estaremos ocultando los botones de radio así como las casillas de verificación.
entrada [tipo = casilla de verificación]: no (antiguo),
entrada [tipo = radio]: no (antiguo) {
  ancho: 28px;
  margen: 0;
  relleno: 0;
  opacidad: 0;
}
En la línea 1 y la línea 2, los selectores utilizan la pseudoclase de negación para ocultar las reglas del navegador anterior. Las líneas 3, 4, 5 se utilizan para establecer el margen, el relleno y el ancho. La línea 6 se ha utilizado para representar la interfaz de usuario estándar mediante el ajuste de la opacidad. Después de eso, ahora podemos hacer el posicionamiento de la etiqueta y la visualización de cualquier imagen no verificada. Aquí está la codificación:
entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta,
entrada [tipo = radio]: no (antiguo) + etiqueta {
  pantalla: bloque en línea;
  margen izquierdo: -28px;
  relleno-izquierda: 28px;
  fondo: url ('checks.png') no-repetir 0 0;
  altura de línea: 24px;
}

entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta,
entrada [tipo = radio]: no (antiguo) + etiqueta {
  pantalla: bloque en línea;
  margen izquierdo: -28px;
  relleno-izquierda: 28px;
  fondo: url ('checks.png') no-repetir 0 0;
  altura de línea: 24px;
}
Finalmente, cuando se seleccionen los botones de opción y las casillas de verificación, podremos mostrar las imágenes seleccionadas.
entrada [tipo = casilla de verificación]: no (antiguo): marcado + etiqueta {
  posición de fondo: 0 -24px;
}

entrada [tipo = radio]: no (antiguo): marcado + etiqueta {
  posición de fondo: 0 -48px;
}

entrada [tipo = casilla de verificación]: no (antiguo): marcado + etiqueta {
  posición de fondo: 0 -24px;
}

entrada [tipo = radio]: no (antiguo): marcado + etiqueta {
  posición de fondo: 0 -48px;
}
Como hemos combinado imágenes de varios estados en una sola imagen, las reglas modificarán la posición del fondo para mostrar la imagen adecuada. 
Sin embargo, ahora vamos a discutir el estilo CSS puro. También se escalará con el tamaño del texto.
La codificación HTML será la misma para todas las casillas de verificación.
<div>
  <input id = "opción" tipo = "casilla de verificación" nombre = "campo" valor = "opción">
  <label for = "option"> <span> <span> </span> </span> Value </label>
</div>

<div>
  <input id = "opción" tipo = "casilla de verificación" nombre = "campo" valor = "opción">
  <label for = "option"> <span> <span> </span> </span> Value </label>
</div>
El intervalo se utiliza para crear los gráficos alternativos. Ambos botones son necesarios para los botones de opción, en el caso de las casillas de verificación solo se necesita una. Sin embargo, ahora tenemos que ocultar los botones de opción y las casillas de verificación de la hoja de estilo. Aquí está la codificación.
entrada [tipo = casilla de verificación]: no (antiguo),
entrada [tipo = radio]: no (antiguo) {
  ancho: 2em;
  margen: 0;
  relleno: 0;
  tamaño de fuente: 1em;
  opacidad: 0;
}

entrada [tipo = casilla de verificación]: no (antiguo),
entrada [tipo = radio]: no (antiguo) {
  ancho: 2em;
  margen: 0;
  relleno: 0;
  tamaño de fuente: 1em;
  opacidad: 0;
}
Después de eso, tenemos que colocar la etiqueta. La codificación está aquí.
entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta,
entrada [tipo = radio]: no (antiguo) + etiqueta {
  pantalla: bloque en línea;
  margen izquierdo: -2em;
  altura de la línea: 1.5em;
}

entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta,
entrada [tipo = radio]: no (antiguo) + etiqueta {
  pantalla: bloque en línea;
  margen izquierdo: -2em;
  altura de la línea: 1.5em;
}
Ahora, tenemos que diseñar el primer tramo para crear gráficos sin marcar.
entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta> intervalo,
entrada [tipo = radio]: no (antiguo) + etiqueta> intervalo {
  pantalla: bloque en línea;
  ancho: 0.875em;
  altura: 0.875em;
  margen: 0.25em 0.5em 0.25em 0.25em;
  borde: 0.0625em rgb sólido (192,192,192);
  radio del borde: 0.25em;
  fondo: rgb (224,224,224);
  imagen de fondo: -moz-lineal-gradiente (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: gradiente lineal-ms (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -o-lineal-gradiente (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -webkit-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: gradiente lineal (rgb (240,240,240), rgb (224,224,224));
  alineación vertical: parte inferior;
}

entrada [tipo = casilla de verificación]: no (antiguo) + etiqueta> intervalo,
entrada [tipo = radio]: no (antiguo) + etiqueta> intervalo {
  pantalla: bloque en línea;
  ancho: 0.875em;
  altura: 0.875em;
  margen: 0.25em 0.5em 0.25em 0.25em;
  borde: 0.0625em rgb sólido (192,192,192);
  radio del borde: 0.25em;
  fondo: rgb (224,224,224);
  imagen de fondo: -moz-lineal-gradiente (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: gradiente lineal-ms (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -o-lineal-gradiente (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -webkit-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: gradiente lineal (rgb (240,240,240), rgb (224,224,224));
  alineación vertical: parte inferior;
}
En las casillas de verificación seleccionadas, así como en los botones de radio, el gradiente de fondo se invierte.
entrada [tipo = casilla de verificación]: no (antiguo): seleccionado + etiqueta> intervalo,
entrada [tipo = radio]: no (antiguo): seleccionado + etiqueta> intervalo {
  imagen de fondo: -moz-lineal-gradiente (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: gradiente lineal-ms (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -o-lineal-gradiente (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -webkit-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: gradiente lineal (rgb (224,224,224), rgb (240,240,240));
}

entrada [tipo = casilla de verificación]: no (antiguo): seleccionado + etiqueta> intervalo,
entrada [tipo = radio]: no (antiguo): seleccionado + etiqueta> intervalo {
  imagen de fondo: -moz-lineal-gradiente (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: gradiente lineal-ms (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -o-lineal-gradiente (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -webkit-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: gradiente lineal (rgb (224,224,224), rgb (240,240,240));
}
Después de eso, necesitamos mostrar una marca dentro de las casillas de verificación seleccionadas.
entrada [tipo = casilla de verificación]: no (antiguo): marcado + etiqueta> intervalo: antes de {
  contenido: '✓';
  bloqueo de pantalla;
  ancho: 1em;
  color: rgb (153,204,102);
  tamaño de letra: 0.875em;
  línea altura: 1em;
  text-align: center;
  texto-sombra: 0 0 0.0714em rgb (115,153,77);
  font-weight: negrita;
}

entrada [tipo = casilla de verificación]: no (antiguo): marcado + etiqueta> intervalo: antes de {
  contenido: '✓';
  bloqueo de pantalla;
  ancho: 1em;
  color: rgb (153,204,102);
  tamaño de letra: 0.875em;
  línea altura: 1em;
  text-align: center;
  texto-sombra: 0 0 0.0714em rgb (115,153,77);
  font-weight: negrita;
}
Por fin, tenemos que mostrar la 'viñeta' dentro del botón de radio seleccionado. Se aplicarán las mismas técnicas que se usaron para los gráficos sin marcar al segundo elemento de tramo. Aquí está la codificación:
entrada [tipo = radio]: no (antiguo): seleccionado + etiqueta> intervalo> intervalo {
  bloqueo de pantalla;
  ancho: 0.5em;
  altura: 0.5em;
  margen: 0.125em;
  borde: 0.0625em rgb sólido (115,153,77);
  radio del borde: 0.125em;
  fondo: rgb (153,204,102);
  imagen de fondo: -moz-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -ms-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -o-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -webkit-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: gradiente lineal (rgb (179,217,140), rgb (153,204,102));
}

entrada [tipo = radio]: no (antiguo): seleccionado + etiqueta> intervalo> intervalo {
  bloqueo de pantalla;
  ancho: 0.5em;
  altura: 0.5em;
  margen: 0.125em;
  borde: 0.0625em rgb sólido (115,153,77);
  radio del borde: 0.125em;
  fondo: rgb (153,204,102);
  imagen de fondo: -moz-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -ms-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -o-lineal-gradiente (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -webkit-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: gradiente lineal (rgb (179,217,140), rgb (153,204,102));
}
Ahora vamos a discutir cómo podemos agregar campos de texto. La adición del campo de texto es bastante simple en relación con las casillas de verificación y los botones de opción. La codificación y el resultado se dan a continuación.
<input class = "textbox" type = "text"> 
<input class = "textbox" type = "text"> 
<input class = "textbox" type = "text"> 

 .caja de texto { 
    borde: 1px punteado # 000000; 
    esquema: 0; 
    altura: 25px; 
    ancho: 275px; 
  } 

<input class = "textbox" type = "text"> 
<input class = "textbox" type = "text"> 
<input class = "textbox" type = "text"> 

 .caja de texto { 
    borde: 1px punteado # 000000; 
    esquema: 0; 
    altura: 25px; 
    ancho: 275px; 
  }