Cambiando estilo del radio buttons con CSS3 y HTML 5

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

Vamos a ver un efecto muy interesante de cambiar el estilo a un radio con css3 y html5, es muy básico el código, ustedes pueden personalizarlo a su manera.

radio.html

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="radio.css"/>
</head>
<body>
	<h1>Radio</h1>
			<input type="radio" name="radio" data-icon="❮❮" />
			<input type="radio" name="radio" data-icon="►" />
			<input type="radio" name="radio" data-icon="❯❯" />
</body>
</html>

radio.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="radio"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 68px;
	height: 80px;
 
	position: relative;
	display: inline-block;
	margin: 3px;
	border-radius: 6px;
 
	background-color: #000;
 
	-webkit-background-clip: padding-box;
 
	border: 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
 
	-webkit-perspective: 200;
}
 
 
 
input[type="radio"]:before {
	content: 		attr(data-icon);
 
	font: 			22px/22px 'Pictos', sans-serif;
	text-shadow: 	rgba(255,255,255,0.08) 0 -1px 0;
	line-height: 	40px;
 
	text-align: 	center;
 
	position: 		absolute;
	z-index: 		10;
 
    width: 			60px;
	height: 		70px;
 
	margin: 4px;
	border-radius: 3px;	
 
    background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
	);
 
	border-top: 1px solid rgba(255,255,255,0.15);
 
}
 
 
input[type="radio"]:after {
	content: "";
	z-index: 		12;
	position: 		absolute;
 
    margin: 3px;
	border-radius: 3px;
 
	left: 			6px;
	top: 			62px;
    width: 			50px;
	height: 		5px;
 
	-webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 2px, inset rgba(255,255,255,.1) 0 1px 1px;
 
}
 
 
/* ----------- checked */
 
 
input[type="radio"]:active, input[type="radio"]:checked {
	-webkit-box-shadow: inset #000 4px 0px 4px, inset #000 -4px 0px 4px;
	background-image: -webkit-gradient(
		linear, left top, left bottom,
		color-stop( 0, 		hsl(0,0%,10%) ),
		color-stop( 0.14, 	hsl(0,0%,30%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);
 
}
 
 
 
input[type="radio"]:active:before, input[type="radio"]:checked:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
	);
 
	z-index: 		11;
 
	border: 0;
	border-top: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							color-stop(0,  hsla(200,100%,85%,.05)),
							color-stop(.5, hsl(200,0%,40%)),
							color-stop(1,  hsla(200,100%,80%,.05)) 
							)50% 100%;
	-webkit-box-shadow: 0px 2px 1px 1px hsl(0,0%,13%);						
	-webkit-transform: rotateX(-25deg) scaleX(.95) translateY(4px);			
}
 
input[type="radio"]:checked:before {
	color: hsl(200,100%,50%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;	
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							color-stop(0,  hsla(200,100%,85%,.05)),
							color-stop(.5, hsl(200,20%,50%)),
							color-stop(1,  hsla(200,100%,80%,.05)) 
							)50% 100%;
}
 
input[type="radio"]:active:after, input[type="radio"]:checked:after {
	top: 59px;
	-webkit-transform: scale(.9);
	opacity: .4;
}
 
 
/* ----------- hover */
 
input[type="radio"]:hover {
	cursor: pointer;
}
input[type="radio"]:checked {
	cursor: default;
}
 
input[type="radio"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19.5%) ), to( hsl(0,0%,14%) )
	);
}
input[type="radio"]:checked:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,12%) )
	);
}

Resultado

You may also like...

1 Response

  1. Javier Rial dice:

    Increible amigo!! Buscaba algo como esto, un par de cambios y podré sacarle provecho. Gracias por el aporte y sigue así!

Deja un comentario

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