Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Estilizar casillas de verificación y campos de texto usando CSS

Agregar casillas de verificación elegantes en HTML, así como botones, se puede hacer muy fácilmente usando el CSS. En realidad, hay dos métodos para crear casillas de verificación elegantes. Un método se basa 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 de las casillas de verificación basado en imágenes permitirá una excelente flexibilidad. Además, la apariencia también será flexible. En este ejemplo, 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 radio o casilla de verificación.
<div>
  <input id = "option" type = "checkbox" name = "field" value = "option">
  <label for = "option"> Valor </label>
</div>
En la hoja de estilo, ocultaremos los botones de opción y las casillas de verificación.
input [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ancho: 28px;
  margen: 0;
  relleno: 0;
  opacidad: 0;
}
En la línea 1 y la línea 2, los selectores usan la pseudoclase de negación para ocultar las reglas del navegador anterior. Las líneas 3, 4 y 5 se utilizan para configurar el margen, el relleno y el ancho. La línea 6 se ha utilizado para representar la interfaz de usuario estándar configurando la opacidad. Después de eso, ahora podemos hacer el posicionamiento de la etiqueta y mostrar cualquier imagen sin marcar. Aquí está la codificación:
input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  pantalla: bloque en línea;
  margen izquierdo: -28 px;
  relleno-izquierda: 28 px;
  fondo: url ('cheques.png') sin repetición 0 0;
  altura de línea: 24 px;
}

input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  pantalla: bloque en línea;
  margen izquierdo: -28 px;
  relleno-izquierda: 28 px;
  fondo: url ('cheques.png') sin repetición 0 0;
  altura de línea: 24 px;
}
Por último, cuando se seleccionan los botones de opción y las casillas de verificación, podremos mostrar las imágenes seleccionadas.
input [type = checkbox]: not (old): marcado + etiqueta {
  posición de fondo: 0 -24 px;
}

input [type = radio]: not (old): marcado + etiqueta {
  posición de fondo: 0 -48px;
}

input [type = checkbox]: not (old): marcado + etiqueta {
  posición de fondo: 0 -24 px;
}

input [type = radio]: not (old): 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 discutiremos 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 = "option" type = "checkbox" name = "field" value = "option">
  <label for = "option"> <span> <span> </span> </span> Value </label>
</div>

<div>
  <input id = "option" type = "checkbox" name = "field" value = "option">
  <label for = "option"> <span> <span> </span> </span> Value </label>
</div>
El lapso se utiliza para crear los gráficos alternativos. Ambos espacios son necesarios para los botones de opción, en el caso de casillas de verificación solo se necesita uno. 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.
input [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ancho: 2em;
  margen: 0;
  relleno: 0;
  tamaño de fuente: 1em;
  opacidad: 0;
}

input [type = checkbox]: not (old),
input [type = radio]: not (old) {
  ancho: 2em;
  margen: 0;
  relleno: 0;
  tamaño de fuente: 1em;
  opacidad: 0;
}
Después de eso, necesitamos posicionar la etiqueta. La codificación está aquí.
input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  pantalla: bloque en línea;
  margen izquierdo: -2em;
  altura de línea: 1.5em;
}

input [type = checkbox]: not (old) + label,
input [type = radio]: not (old) + label {
  pantalla: bloque en línea;
  margen izquierdo: -2em;
  altura de línea: 1.5em;
}
Ahora, tenemos que diseñar el primer tramo para crear gráficos sin marcar.
input [type = checkbox]: not (old) + label> span,
input [type = radio]: not (old) + label> span {
  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 de borde: 0.25em;
  fondo: rgb (224,224,224);
  imagen de fondo: -moz-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -ms-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -o-linear-gradient (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: abajo;
}

input [type = checkbox]: not (old) + label> span,
input [type = radio]: not (old) + label> span {
  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 de borde: 0.25em;
  fondo: rgb (224,224,224);
  imagen de fondo: -moz-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -ms-linear-gradient (rgb (240,240,240), rgb (224,224,224));
  imagen de fondo: -o-linear-gradient (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: abajo;
}
En las casillas de verificación seleccionadas, así como en los botones de opción, se invierte el gradiente de fondo.
input [type = checkbox]: not (old): marcado + etiqueta> span,
input [type = radio]: not (old): marcado + etiqueta> span {
  imagen de fondo: -moz-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -ms-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -o-linear-gradient (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));
}

input [type = checkbox]: not (old): marcado + etiqueta> span,
input [type = radio]: not (old): marcado + etiqueta> span {
  imagen de fondo: -moz-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -ms-linear-gradient (rgb (224,224,224), rgb (240,240,240));
  imagen de fondo: -o-linear-gradient (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, debemos mostrar una marca dentro de las casillas seleccionadas.
input [type = checkbox]: not (old): marcado + etiqueta> span: before {
  contenido: '✓';
  bloqueo de pantalla;
  ancho: 1em;
  color: rgb (153,204,102);
  tamaño de fuente: 0.875em;
  altura de línea: 1em;
  alinear texto: centro;
  sombra de texto: 0 0 0.0714em rgb (115,153,77);
  peso de fuente: negrita;
}

input [type = checkbox]: not (old): marcado + etiqueta> span: before {
  contenido: '✓';
  bloqueo de pantalla;
  ancho: 1em;
  color: rgb (153,204,102);
  tamaño de fuente: 0.875em;
  altura de línea: 1em;
  alinear texto: centro;
  sombra de texto: 0 0 0.0714em rgb (115,153,77);
  peso de fuente: negrita;
}
Por último, tenemos que mostrar la 'viñeta' dentro del botón de radio seleccionado. Se aplicarán las mismas técnicas que se han utilizado para los gráficos no controlados en el segundo elemento del tramo. Aquí está la codificación:
input [type = radio]: not (old): marcado + etiqueta> span> span {
  bloqueo de pantalla;
  ancho: 0.5em;
  altura: 0.5em;
  margen: 0.125em;
  borde: 0.0625em rgb sólido (115,153,77);
  radio de borde: 0.125em;
  fondo: rgb (153,204,102);
  imagen de fondo: -moz-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -ms-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -o-linear-gradient (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));
}

input [type = radio]: not (old): marcado + etiqueta> span> span {
  bloqueo de pantalla;
  ancho: 0.5em;
  altura: 0.5em;
  margen: 0.125em;
  borde: 0.0625em rgb sólido (115,153,77);
  radio de borde: 0.125em;
  fondo: rgb (153,204,102);
  imagen de fondo: -moz-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -ms-linear-gradient (rgb (179,217,140), rgb (153,204,102));
  imagen de fondo: -o-linear-gradient (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 discutiremos cómo podemos agregar campos de texto. La adición de un 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; 
  } 

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas