El estilo de casilla de verificación usando CSS

Styling Casilla : Aquí, vamos a aprender cómo casilla estilo usando CSS (Cascading Style Sheet)?

Introducción:

A veces queremos desarrollar una página web o en la web que contuviera una forma ya través de esa forma, queremos obtener algo de información del usuario. Ahora que la información podría ser de cualquier tipo, dependiendo del tipo de formulario que ha creado en su página web o sitio web. Aunque puede haber ocasiones en las que no hay uso de formularios en su sitio web o página web, sin embargo, hay que utilizar formularios donde las necesidades son, class ejemplo, la realización de una encuesta, o tomar la información personal del usuario y mucho más. Ahora, cuando estamos creando formularios en nuestra página web o página web, a menudo vemos el uso de casillas o botones , lo que nos lleva al tema styling Las casillas de verificación usando CSS .

Ahora como todos casillas de verificación know se utilizan ampliamente en cualquier página web o en la web, si va a crear una forma o no, casillas de verificación puede utilizarse for muchas razones. Pero lo que si deseamos estilo de nuestras casillas de verificación esas aburridas? Eso sería bastante impresionante ¿verdad? Así que se sepa que no hay ninguna propiedad particular o método para lograr esta tarea. ¿Asi que que hacemos? Bueno, nadie es un desarrollador si no hay creatividad. Así que vamos a seguir adelante y ver cómo podemos el estilo de las casillas de verificación el uso de CSS .

pasos:

Hay varios pasos que usted puede ser que tenga que seguir el estilo de su casilla, por seguir a lo largo!

  1. En primer lugar, es necesario ocultar el elemento de entrada :
    Con el fin de hacer eso, debe establecer la opacidad del elemento a 0, ya que ello ayudará a hacer el elemento invisible al lado de todos los detectores de eventos trabajará.
  2. A continuación, es necesario añadir un elemento span :
    Estamos utilizando lapso como elemento marcador de posición aquí, estaríamos usando vano sobre como elemento de bloque div ya que es conocido por ser un elemento en línea que no lo hará tomar hasta toda la anchura.

Ahora, eso no es todo! Si desea mostrar un poco de transición a su casilla de verificación, a continuación, seguir adelante y añadir un poco de efecto dominó.

resumir:

Por lo tanto, siga estos pasos y usted será capaz de estilo de sus casillas de verificación. Como se puede ver que no hay un método directo para lograrlo, pero con la ayuda de los pasos antes mencionados se puede lograr esta tarea.

Para resumir todo esto, en primer lugar, es necesario ocultar el elemento mediante el establecimiento de la opacidad a 0 y el siguiente paso es añadir un elemento span como un marcador de posición.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.label1 {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
input[type=checkbox] {
visibility: hidden;
}
.span1 {
position: absolute;
top: 0;
left: 0;
height: 35px;
width: 35px;
background-color: red;
}
.label1:hover input ~ .span1 {
background-color: black;
}
.label1 input:active ~ .span1 {
background-color: red;
}
.label1 input:checked ~ .span1 {
background-color: green;
}
.span1:after {
content: "";
position: absolute;
display: none;
}
.label1 input:checked ~ .span1:after {
display: block;
}
.label1 .span1:after {
left: 8px;
bottom: 5px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 4px 4px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Is IncludeHelp helpful?</h1>
<label class="label1">Yes
<input type="checkbox">
<span class="span1"></span>
</label>
<label class="label1">Definitely Yes
<input type="checkbox" checked="checked">
<span class="span1"></span>
</label>
</body>
</html>

salida

Styling Checkbox using CSS - 4

En el ejemplo anterior, si pasa el ratón sobre el recuadro Sí se puede ver el color rojo se volvió a negro .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *