Cambiar estilo checkbox con CSS3 (Estilo switch on/off)

closeHola! hace 5 years 6 months 30 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Comparto otro buen código que hace tiempo encontré por la web, modificado un poco por mi, que permite cambiar el estilo de los checkbox clásicos a un estilo mas amigable y novedoso sin necesidad de usar imágenes, todo se hace con CSS3.

El código es el siguiente:

checkbox.css

 
html {
	font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
	background-color: hsl(0,0%,16%);
	background-size: 5px 5px;
	background-image:	-webkit-linear-gradient( 90deg, hsla(0,0%,0%,0) 0px, hsla(0,0%,0%,.12) 50%, hsla(0,0%,0%,0) 100% );
}
 
body {
	padding: 50px;
	max-width: 600px;
	margin: 0 auto;
	background-image: -webkit-linear-gradient( 0deg, 	hsla(0,0%,100%,0) 0px, 
														hsla(0,0%,100%,.03) 50%, 
														hsla(0,0%,100%,0) 100% );
 
}
h1{
	color: #FFFFFF;
}
 
input[type="checkbox"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 120px;
	height: 40px;
 
	position: relative;
	border-radius: 6px;
	background-color: #000;
	-webkit-background-clip: padding-box;
 
	border: 0;
	border-bottom: 1px solid transparent;
	-webkit-perspective: 200;
}
 
input[type="checkbox"]:before, input[type="checkbox"]:after {
	font: bold 22px/32px sans-serif;
 
	text-align: 	center;
 
	position: 	absolute;
	z-index: 	1;
 
    width: 			56px;
	height: 		30px;
    top: 			4px;
 
    border: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
}
 
input[type="checkbox"]:before {
	content: 	attr(data-icon1);
	left: 		4px;
	border-radius: 3px 0 0 3px;
 
}
 
input[type="checkbox"]:after {
	content: 	attr(data-icon2);
	right: 		4px;
	border-radius: 0 3px 3px 0;
}
 
 
/* ----------- checked/unchecked */
 
/* unchecked */
input[type="checkbox"] {
	-webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
 
	background-image: -webkit-gradient(
		linear, right top, left top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-right: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;
 
	-webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
	-webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
}
 
 
/* checked */
input[type="checkbox"]:checked {
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
 
	background-image: -webkit-gradient(
		linear, left top, right top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:checked:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-left: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;
 
	-webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
	-webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
}
 
 
/* ----------- active/inactve */
 
/* Active */
input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
	color: hsl(200,100%,50%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
	-webkit-transform: none;
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
	);
	-webkit-border-image: none;
	-webkit-box-shadow: none;
 
	z-index: 	2;
	-webkit-box-reflect: 	below -4px -webkit-gradient(linear, left top, left bottom, 
							from(transparent), color-stop(0.3, transparent), to( rgba(255,255,255,0.2) ));
 
}
 
/* Inactive */
input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
	color: #000;
	text-shadow: rgba(255,255,255,.1) 0 -1px 0;
	-webkit-box-reflect: none;
	z-index: 	1;
}
 
 
 
 
/* ----------- hover */
 
input[type="checkbox"]:hover {
	cursor: pointer;
}
 
input[type="checkbox"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);
 
}
input[type="checkbox"]:hover:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) ) 
	);
}
 
input[type="checkbox"]:checked:hover:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) ) 
	);
 
}
input[type="checkbox"]:checked:hover:after {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);
}

checkbox.html

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="checkbox.css"/>
</head>
<body>
	<h1>CheckBox</h1>
		<input type="checkbox" data-icon1="ON" data-icon2="OFF" />
</body>
</html>

Resultado

Ejemplo http://blog.jodacame.com/ejemplos/democss3_checkbox

You may also like...

3 Responses

  1. Guillermo Siliceo dice:

    Un pequeño demo siempre se aprecia, porque para el que va llegando invertirle tiempo sin saber si va a funcionar está dificil.

  2. kesymaru dice:

    Una desventaja de usar  webkit es que solo en google chrome, chromiun y en safari funciona, dejando a firefox, creoq que para todas las funciones existe un equivalente en -moz pero no estoy seguro..

    En fin es un buen aporte!

Deja un comentario

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