Cross browser CSS checkbox issue

Question

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 Safari) but isn't visible on Firefox. I've got it so that the native checkbox is visible if the styled one isn't so it's not terrible, but I'd like to have a consistent experience.

It seems as though the :after element is just not being rendered in FF when I inspect the code.

Here's my HTML:

<div class="text-center checkbox">
  <label>
    <input type="checkbox" value="on">
  </label>
</div>

The CSS:

.checkbox {
  label {
    position: relative;
    cursor: pointer;
    padding-left: 1em;
  }
  &:hover {
    input[type=checkbox] {
      &:after {
        cursor: pointer;
        border-color: blue;
      }
    }
  }
  input[type=checkbox] {
    position: absolute;
    &:after {
      background: white;
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      position: relative;
      top: -4px;
      border-radius: 3px;
      border: 2px solid gray;
      transition: border 0.3s ease;
    }
    &:checked {
      &:after {
        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-color: blue;
      }
    }
  }
}

I have it set up on a Codepen. In my CSS file, I've noted where I forked this code from and modified; given the markup we're using I had to make some tweaks to the elements being styled. The inspiration code works cross browser which is further mystifying me!

Shital Marakana · Accepted Answer · 2017-05-01 15:01:02Z

try this below code for checkbox

<style type="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>
    <div class="text-center">
      <label>
        <input type="checkbox" value="on">
      </label>
    </div>

Christien · Accepted Answer · 2017-05-01 13:52:32Z

1

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

More info on this: doc

answered May 1, 2017 at 13:52

Christien

1207 bronze badges

Comments

Andrew Ice · Accepted Answer · 2017-05-01 14:03:07Z

0

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}

answered May 1, 2017 at 14:03

Andrew Ice

8414 silver badges16 bronze badges

3 Comments

Nachiket Kumar Over a year ago

Thanks @Christien and Andrew, this helps. I think I'm stuck with using the native checkbox as a fallback since I can't change the markup at this point.

Andrew Ice Over a year ago

Ahh, apologies. I did not know the markup was not able to change.

Andrew Ice Over a year ago

Seems somewhat similar to this question, Check it out: stackoverflow.com/questions/21220360/…

Saran · Accepted Answer · 2017-05-03 10:23:12Z

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

label input {
    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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center checkbox">
  <label class="unchecked">
    <input type="checkbox" value="on">
  </label>
</div>

Collectives™ on Stack Overflow

Cross browser CSS checkbox issue

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Related