Remove A Hover Class From A Checkbox Once Clicked

I am trying to remove a hover class applied to a checkbox via CSS once the box has been clicked. Does anyone know how to do this? JSFiddle http://jsfiddle.net/sa9fe/ The checkbox c

Solution 1:

So just add this

.regular-checkbox:checked, .regular-checkbox:checked:hover {
    background-color: #39c;
    color: #fff !important;
}

and if you want remove blue border add outline:0; on your .regular-checkbox class

http://jsfiddle.net/sa9fe/4/

Solution 2:

Are you looking for this

.regular-checkbox:checked:hover {
    background-color: #39c;
    color: #fff !important;
}

Fiddle: http://jsfiddle.net/sa9fe/5/

Solution 3:

if you are familiar with jQuery, you can define an onClick event for a particular checkbox and inside of function use removeClass(classname). You can find more at jQuery api site.