Radio personalizada Styling botón con CSS

En este artículo, vamos a aprender a botón Personalizar peinar el uso de CSS (Cascading Style Sheet)?

las formas han sido la parte más útil de la Web. Reserva de entradas para el cine o la reserva de vuelos son usos comunes de los formularios HTML. class formas no son muy bien parecido, sólo proporciona una buena funcionalidad.

El uso de CSS, podemos personalizar las formas en algo increíble. Pero limitando la discusión de hoy a los botones de radio sólo, podemos obtener una breve cómo se logra la forma de estilo.

Custom Radio Button Styling with CSS - 4

código CSS para los botones de selección Personalizar

input[type="radio"]{
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 10px;
height: 10px;
background: transparent;
vertical-align: middle;
border: 2px solid #f56;
border-radius: 50%;
padding: 2px;
margin:0 5px;
}
input[type="radio"]:checked + label span {
width: 10px;
height: 10px;
background: #f56;
background-clip: content-box;
}

Por lo tanto, la forma básica en HTML, con dos botones de entrada de radio que tiene mismo nombre, ya que sólo uno se pasarán al servidor. Este es el estilo Default proporcionada por el agente de usuario de estilo.

Ahora viene nuestra ingrediente mágico, el CSS. Voy a mantener el breve CSS y al grano. Lo primero es ocultar los botones de radio. Usted debe estar pensando cómo serían los botones de radio funcionarán si están ocultos. Se dará cuenta de una etiqueta etiqueta junto a cada botón de radio. Lo que hace es seleccionar la opción cuando usted haga clic en el texto. El forattribute etiqueta utiliza el ID del botón de opción para determinar la etiqueta correspondiente. Es por ello que podemos ocultar con seguridad botones de radio ya que no es un texto que se puede hacer clic.

Usando el operador +, seleccionamos el elemento hermano en CSS . Dentro de la etiqueta etiqueta creamos un elemento span, donde será nuestro botón de radio personalizada. Selección del selector usando de entrada [type = “radio”] + etiqueta lapso podemos definir propiedades class el botón de radio.

La anchura, altura son default las dimensiones. La propiedad display: inline-block lo convierte en un elemento de bloque que se comporta como en línea. A continuación se ajusta a fondo transparente, porque estamos usando fronteras for el círculo. La frontera de radio 50% propiedad lo convierte en círculo.

El : comprueba selector es for botones de radio y casillas de verificación para denotar su estado de activación. Ahora, nos limitaremos a darle un color de fondo for el pequeño círculo. Los clips de propiedad background-clip de los antecedentes del contenido solo, ya que queremos que el relleno a lo muestran como un punto en el círculo.

Por lo tanto, esta es la forma de construir una forma elegante. Experimento con sus propios botones de radio y hacer compartir un enlace de su trabajo en los comentarios a continuación.

código HTML con CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Custom radio button styling</title>
<style>
input[type="radio"]{
display: none;
}
input[type="radio"] + label span {
display: inline-block;
width: 10px;
height: 10px;
background: transparent;
vertical-align: middle;
border: 2px solid #f56;
border-radius: 50%;
padding: 2px;
margin:0 5px;
}
input[type="radio"]:checked + label span {
width: 10px;
height: 10px;
background: #f56;
background-clip: content-box;
}
</style>
</head>
<body>
<input id="individual" type="radio" name="user" value="Individual">
<label for="individual"><span></span>Individual</label>
<input id="organization" type="radio" name="user" value="Organization">
<label for="organization"><span></span>Organization</label>
</body>
</html>

DEMO


Deja un comentario

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