Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Personaliza las casillas de verificación y las entradas de radio con CSS

Las casillas de verificación y los botones de opción son los elementos comunes que se deben utilizar en cualquier formulario web. Generalmente, el estilo predeterminado del navegador se usa para la casilla de verificación y el botón de opción. Pero si desea hacer un buen formulario web de UI y combinarlo con el diseño de la página web, se requiere la personalización del elemento de formulario.
Personalizar la casilla de verificación y el botón de opción anula el estilo predeterminado del navegador y cambia el aspecto de la casilla de verificación y los campos de radio. Puede personalizar fácilmente las casillas de verificación y las entradas de radio con CSS sin utilizar el código JavaScript. En este tutorial, le mostraremos cómo personalizar las casillas de verificación y las entradas de radio con CSS.

Personalizar Checkbox con CSS

El siguiente código de ejemplo crea casillas de verificación personalizadas utilizando CSS.
Código HTML:
el siguiente HTML define las entradas del formulario de casilla de verificación.
< label  class = "checkbox" > Uno
    < tipo de entrada  = "casilla de verificación" marcada = "marcada" > 
    < span  class = "check" > </ span >
</ label >
< label  class = "checkbox" > Dos
    < input  type = "checkbox" >
    < span  class = "check" > </ span >
</ label >
< label  class = "checkbox" > Tres
    < input  type = "checkbox" >
    < span  class = "check" > </ span >
</ label >
< label  class = "checkbox" > Cuatro
    < input  type = "checkbox" >
    < span  class = "check" > </ span >
</ label >
Código CSS:
use el siguiente código CSS para anular el estilo predeterminado del navegador con la casilla de verificación personalizada.
/ * casilla de verificación personalizada * / 
.checkbox {
     pantalla :  bloque ;
    posición :  relativa ;
    relleno-izquierda :  35 px ;
    margen inferior :  12 px ;
    cursor :  puntero ;
    tamaño de letra :  22 px ;
    -webkit-user-select :  none ;
    -moz-user-select :  none ;
    -ms-user-select :  ninguno ;
    selección de usuario :  ninguna ;
}

/ * oculta la casilla de verificación predeterminada del navegador * / 
.checkbox  input {
     posición :  absoluta ;
    opacidad :  0 ;
    cursor :  puntero ;
}

/ * crear casilla de verificación personalizada * / 
.check {
     posición :  absoluta ;
    arriba :  0 ;
    izquierda :  0 ;
    altura :  25 px ;
    ancho :  25 px ;
    color de fondo :  #eee ;
    borde :  1 px  sólido  #ccc ;
}

/ * en mouse-over, agregue color de borde * / 
.checkbox : hover  input ~ .check {
     border :  2 px  solid  # 2489C5 ;
}

/ * agregar color de fondo cuando la casilla de verificación está marcada * / 
.checkbox  input : checked ~ .check {
     background-color :  # 2489C5 ;
    frontera : ninguna ;
}

/ * crea la marca de verificación y oculta cuando no está marcado * / 
.check : after {
     content :  "" ;
    posición :  absoluta ;
    pantalla :  ninguna ;
}

/ * muestra la marca de verificación cuando se marca * / 
.checkbox  input : check ~ .check : after {
     display :  block ;
}

/ * * Estilo de marca de verificación / 
.checkbox  .Comprobar : después de {
     izquierda :  9 px ;
    superior :  5 px ;
    ancho :  5 px ;
    altura :  10 px ;
    borde :  blanco sólido  ;
    ancho del borde : 0 3 px 3 px 0 ;    
    -webkit-transform : rotar ( 45 grados );
    -ms-transformar : rotar ( 45 grados );
    transformar : girar ( 45 grados );
}

Personalizar botón de radio con CSS

El siguiente código de ejemplo crea botones de radio personalizados usando CSS.
Código HTML:
el siguiente HTML define las entradas de formulario de radio.
< label  class = "radio" > One
    < tipo de entrada  = "radio" marcada = "marcada" nombre = "radio" >  
    < span  class = "check" > </ span >
</ label >
< label  class = "radio" > Dos
    < input  type = "radio"  name = "radio" >
    < span  class = "check" > </ span >
</ label >
< label  class = "radio" > Tres
    < input  type = "radio"  name = "radio" >
    < span  class = "check" > </ span >
</ label >
< label  class = "radio" > Cuatro
    < input  type = "radio"  name = "radio" >
    < span  class = "check" > </ span >
</ label >
Código CSS:
use el siguiente código CSS para anular el estilo predeterminado del navegador con un botón de radio personalizado.
/ * radio personalizada * / 
.radio {
     pantalla :  bloque ;
    posición :  relativa ;
    relleno-izquierda :  35 px ;
    margen inferior :  12 px ;
    cursor :  puntero ;
    tamaño de letra :  22 px ;
    -webkit-user-select :  none ;
    -moz-user-select :  none ;
    -ms-user-select :  ninguno ;
    selección de usuario :  ninguna ;
}

/ * oculta el botón de radio predeterminado del navegador * / 
.radio  input {
     posición :  absoluto ;
    opacidad :  0 ;
    cursor :  puntero ;
}

/ * Crear la radio * / encargo 
.Radio  .Comprobar {
     posición :  absoluta ;
    arriba :  0 ;
    izquierda :  0 ;
    altura :  25 px ;
    ancho :  25 px ;
    color de fondo :  #eee ;
    borde :  1 px  sólido  #ccc ;
    radio del borde :  50 % ;
}

/ * en el mouse-over, agregue el color del borde * / 
.radio : hover  input ~ .check {
     border :  2 px  solid  # 2489C5 ;
}

/ * agregar color de fondo cuando se 
marca  la radio * / .radio input : check ~ .check {
     background-color :  # 2489C5 ;
    frontera : ninguna ;
}

/ * Crear la radio y ocultar cuando no se marca * / 
.Radio  .Comprobar : después de {
     contenido :  "" ;
    posición :  absoluta ;
    pantalla :  ninguna ;
}

/ * muestra la radio cuando está marcada * / 
.radio  input : check ~ .check : after {
     display :  block ;
}

/ * Estilo de radio * / 
.Radio  .Comprobar : después de {
     top :  9 px ;
    izquierda :  9 px ;
    ancho :  8 px ;
    altura :  8 px ;
    radio del borde :  50 % ;
    fondo :  blanco ;
}

Conclusión

Hay muchos complementos de jQuery disponibles para personalizar las casillas de verificación y los botones de radio. Pero siempre es una decisión inteligente utilizar CSS para personalizar desde elementos de entrada. Nuestro código de ejemplo proporciona la forma más fácil de cambiar el estilo predeterminado de las casillas de verificación y las entradas de radio. Además, puede cambiar fácilmente el color de la casilla de verificación personalizada y el botón de radio según el diseño de su sitio web.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas