Hoy os traigo una forma de customizar vuestros checkbox de una manera rápida y sencilla. Ya sabemos que existen librerías que nos hacen este trabajo pero en ocaciones, tiene una gran dificultad el implementarlas. Por ellos os traigo una forma de customizar vustros checkbox de una manera totalmente personalizada y adaptable a vuestras necesidades. Con sólo unos mínimos cambios para adaptarlo a vuestras "class" e "id" podreis usarlo de forma correcta y sin ningún problema.
Los requisitos para hacerlo funcionar son tan simples como tener una librería jquery instalada y que os diseñeis vuestro checkbox con unas medidas de 17px x 17px con el antes y el despues de haberlo clicado y sustituirlo por la imagen de mis checkbox. ? Fácil y sencillo verdad ? Pues vamos a ver el código empleado.
Usamos un código HTML de muestra como el siguiente:
<html> <head> </script> <link rel="stylesheet" type="text/css" href="moviles.css" media="all" /> <script src="jquery.js" type="text/javascript"></script> <script src="misfunciones.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form> <input id="Inicio_cercanos" type="checkbox" name="check"/> </form> </body> </html>
La estrategia a seguir es la siguiente. A través de jquery sustituiremos ese checkbox ordianrio por un bloque que simule su funcionamiento y ocultaremos el antiguo checkbox no si antes acordarnos de que los cambios que hagamos sobre el checkbox simulado deberan de provocar un cambio en el value del checkbox original para que una vez enviado el formulario ese valor se envie correctamente y se pueda procesar.
Entendido esto veamos el código jquery, fácil y sencillo:
jQuery(document).ready(
function() {
$('#Inicio_cercanos').css('display','none');
$('#Inicio_cercanos').parent().prepend('<div class="custom-check"></div>');
$('.custom-check').toggle(function(){
$('.custom-check').css('background-position','left -44px ');
$('#Inicio_cercanos').attr('checked','checked');
},function(){
$('.custom-check').css('background-position','left top ');
$('#Inicio_cercanos').attr('checked','');
});
});
Y por último añadimos un poco de css para darle algo de estilo e incluir la imagen del checkbox customizado:
.custom-check{
background:url(./images/checkbox.gif) no-repeat left top;
width:17px;
height:17px;
cursor:pointer;
margin-left:0.8em;
}
Y listo, tan fácil como esto, sin necesidad de usar clases especificas que si quieres modificarlas a tu gusto es un lio.
Con estas pocas lineas lo tendrás todo para modificar tus checkbox y un código que podrás facilmente adaptar a tus necesidades y clases.
Os podeis bajar el código de ejemplo de aquí
Espero que os sirva de utilidad.
Cualquier duda que tengais no dudeis en contactar conmigo.