jQuery Fancy Custom Radio-button and Checkbox
Modificar los estilos de los inputs de un formulario con CSS es una tarea que puede resultar difícil o imposible en los casos de checkboxes o radio buttons.
Los checkboxes y radio buttons utilizan gráficas propias de cada navegador. Podemos cambiar el aspecto de estos elementos utilizando el plugin jQuery Custom Checkbox.
Este plugin para jQuery estiliza los checkboxes y radio buttons obteniendo un resultado como el siguiente:
Para disponer de este plugin deberemos descargarlo y añadirlo a nuestra página de la siguiente manera. En el <head> deberemos añadir algo como lo siguiente:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.custom_radio_checkbox.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".radio").dgStyle();
$(".checkbox").dgStyle();
});
</script>
<style type="text/css">
.radio {
height: 25px;
width: 19px;
clear:left;
float:left;
margin: 0 0 3px;
padding: 0 0 0 26px;
background: url("radio.png");
background-repeat:no-repeat;
cursor: default;
}
.checkbox {
height: 25px;
width: 19px;
clear:left;
float:left;
margin: 0 0 3px;
padding: 0 0 0 26px;
background: url("checkbox.gif") no-repeat;
cursor: default;
text-align:left;
}
.checkbox input,.radio input {
display: none;
}
.checkbox input.show,.radio input.show {
display: inline;
}
.selected {
background-position: 0 -52px;
}
</style>
Donde estamos incluyendo los estilos necesarios para los inputs checkbox y radio button, la libería jQuery y el plugin Custom Checkbox además de su llamada.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “jQuery Fancy Custom Radio-button and Checkbox”
Deja una respuesta
103 artículos que te podrían interesar
Ver más sobre
¿Donde se descarga ese plugin?
¿Y donde se debe instalar o que hay que modificar si usamos Prestashop (uso la 1.6.0.14)?
Eso no ha quedado muy claro
Hola,
En prestashop no sabría decirte ya que prestashop ya está usando un plugin para modificar el aspecto de estos checkboxes. Antes de nada tendrás que deshabilitarlo para evitar conflictos.
Saludos