Esta es la contestación más válida que te podemos dar, sin embargo mírala detenidamente y valora si es compatible a tu trabajo.
Solución:
ACTUALIZAR:
La siguiente respuesta hace referencia al estado de cosas antes de la disponibilidad generalizada de CSS 3. En los navegadores modernos (incluido Internet Explorer 9 y posteriores) es más sencillo crear reemplazos de casillas de verificación con su estilo preferido, sin usar JavaScript.
A continuación, se muestran algunos enlaces útiles:
- Creación de casillas de verificación de formularios personalizados con solo CSS
- Generador de casillas de verificación CSS fácil
- Cosas que puedes hacer con el truco de casilla de verificación
- Implementación de casillas de verificación y botones de opción personalizados con CSS3
- Cómo aplicar estilo a una casilla de verificación con CSS
Vale la pena señalar que la cuestión fundamental no ha cambiado. Aún no puede aplicar estilos (bordes, etc.) directamente al elemento de casilla de verificación y esos estilos afectan la visualización de la casilla de verificación HTML. Sin embargo, lo que ha cambiado es que ahora es posible ocultar la casilla de verificación real y reemplazarla con un elemento de estilo propio, usando nada más que CSS. En particular, debido a que CSS ahora tiene una amplia compatibilidad :checked selector, puede hacer que su reemplazo refleje correctamente el estado marcado de la caja.
ANTERIOR RESPUESTA
Aquí hay un artículo útil sobre el estilo de las casillas de verificación. Básicamente, ese escritor descubrió que varía enormemente de un navegador a otro, y que muchos navegadores siempre muestran la casilla de verificación predeterminada sin importar el estilo que le dé. Entonces, realmente no hay una manera fácil.
No es difícil imaginar una solución en la que usaría JavaScript para superponer una imagen en la casilla de verificación y hacer clic en esa imagen para hacer que la casilla de verificación real esté marcada. Los usuarios sin JavaScript verían la casilla de verificación predeterminada.
Editado para agregar: aquí hay un buen script que hace esto por usted; oculta el elemento de casilla de verificación real, lo reemplaza con un intervalo con estilo y redirige los eventos de clic.
Puede lograr un efecto de casilla de verificación personalizado bastante genial utilizando las nuevas habilidades que vienen con el :after y :before pseudo clases. La ventaja de esto es: no necesita agregar nada más al DOM, solo la casilla de verificación estándar.
Tenga en cuenta que esto solo funcionará para navegadores compatibles. Creo que esto está relacionado con el hecho de que algunos navegadores no le permiten configurar :after y :before en elementos de entrada. Lo que, lamentablemente, significa que por el momento solo se admiten los navegadores WebKit. Firefox + Internet Explorer seguirá permitiendo que las casillas de verificación funcionen, simplemente sin estilo, y es de esperar que esto cambie en el futuro (el código no usa prefijos de proveedores).
Esta es una solución de navegador WebKit únicamente (Chrome, Safari, navegadores móviles)
Ver ejemplo de violín
$(function()
$('input').change(function()
$('div').html(Math.random());
);
);/* Main Classes */
.myinput[type="checkbox"]:before
position: relative;
display: block;
width: 11px;
height: 11px;
border: 1px solid #808080;
content: "";
background: #FFF;
.myinput[type="checkbox"]:after
position: relative;
display: block;
left: 2px;
top: -11px;
width: 7px;
height: 7px;
border-width: 1px;
border-style: solid;
border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
content: "";
background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
background-repeat: no-repeat;
background-position: center;
.myinput[type="checkbox"]:checked:after
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
.myinput[type="checkbox"]:disabled:after
-webkit-filter: opacity(0.4);
.myinput[type="checkbox"]:not(:disabled):checked:hover:after
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
.myinput[type="checkbox"]:not(:disabled):hover:after
background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
.myinput[type="checkbox"]:not(:disabled):hover:before
border-color: #3D7591;
/* Large checkboxes */
.myinput.large
height: 22px;
width: 22px;
.myinput.large[type="checkbox"]:before
width: 20px;
height: 20px;
.myinput.large[type="checkbox"]:after
top: -20px;
width: 16px;
height: 16px;
/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
Normal:
Small:
Large:
Custom icon:
Bonus violín estilo Webkit flipswitch
$(function()
var f = function()
$(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
;
$('input').change(f).trigger('change');
);body
font-family: arial;
.flipswitch
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor: pointer;
border: 1px solid #ddd;
.flipswitch:after
position: absolute;
top: 5%;
display: block;
line-height: 32px;
width: 45%;
height: 90%;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: all 0.3s ease-in 0s;
color: black;
border: #888 1px solid;
border-radius: 3px;
.flipswitch:after
left: 2%;
content: "OFF";
.flipswitch:checked:after
left: 53%;
content: "ON";
Webkit friendly mobile-style checkbox/flipswitch
Hay una forma de hacer esto usando solo CSS. Podemos (ab) usar el label elemento y estilo ese elemento en su lugar. La advertencia es que esto no funcionará para Internet Explorer 8 y versiones inferiores.
.myCheckbox input
position: relative;
z-index: -9999;
.myCheckbox span
width: 20px;
height: 20px;
display: block;
background: url("link_to_image");
.myCheckbox input:checked + span
background: url("link_to_another_image");
Comentarios y calificaciones del tutorial
Más adelante puedes encontrar las explicaciones de otros gestores de proyectos, tú además tienes la libertad de dejar el tuyo si lo crees conveniente.