Cross Browser Css Checkbox Issue

I'm having some issues getting my CSS checkbox to show up on Firefox. I'm using an :after: element to style the new checkbox, and it works fine on webkit browsers (Chrome and Safar

Solution 1:

try this below code for checkbox

<styletype="text/css">
    * {
      box-sizing: border-box;
    }

    body {
      margin: 3em;
      background: #efefef;
    }
    input[type=checkbox] {
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
        -webkit-appearance: none;
        outline: 0;
        background: white;
        border-radius: 3px;
        border: 2px solid #dedede;
        transition: border 0.3s ease;


    }
    input[type="checkbox"]:hover{ 
            border-radius: 3px;
            border: 2px solid #4291DB;
            transition: border 0.3s ease;

    }
    input[type=checkbox]:checked {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDkgNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBvbHlsaW5lIGlkPSJQYXRoIiBzdHJva2U9IiM0MjkxREIiIHN0cm9rZS13aWR0aD0iMTEiIHBvaW50cz0iMy43NTY1MzE0OCAxOC45ODA0MDUyIDIyLjc1Mzc0MjQgMzMuMDg5OTk4NiA0NC41ODgzMTcxIDMuNDk1NDY5MjIiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPg==');
            background-repeat: no-repeat;
            background-position: center left 2px;
            background-size: 75%;

            border-radius: 3px;
            border: 2px solid #4291DB;
            transition: border 0.3s ease;


    }
  </style><divclass="text-center"><label><inputtype="checkbox"value="on"></label></div>

Solution 2:

:before and :after only work on elements with content. <input> cannot contain content so it won't work.

More info on this: doc

Solution 3:

I generally use the label tag as a custom style tag. I personally tend to put my label after my input. Not wrap the input. This way you can do:

input[type=checkbox] + label {//Basic styles}input[type=checkbox]:checked + label {//Checked styles}

Solution 4:

$('input').click(function(){
    if($(this).prop("checked") == true){
        $(this).closest("label").addClass("checked");
        $(this).closest("label").removeClass("unchecked");
    }
    elseif($(this).prop("checked") == false){
        $(this).closest("label").addClass("unchecked");
		$(this).closest("label").removeClass("checked");
    }
});

labelinput {
    opacity: 0;
    cursor: pointer;
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
}
label.unchecked {
    background: #000;
    cursor:pointer;
}
label.checked {
    background: green;
    cursor:pointer;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="text-center checkbox"><labelclass="unchecked"><inputtype="checkbox"value="on"></label></div>