CODEWITHSUNDEEP
htmlcss
Nachiket Kumar
Nachiket Kumar

Reputation: 1

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 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!

Upvotes: 0

Views: 1080

Answers (4)

Saran
Saran

Reputation: 963

$('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>

Upvotes: 0

Shital Marakana
Shital Marakana

Reputation: 2887

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>

Upvotes: 2

Andrew Ice
Andrew Ice

Reputation: 841

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}

Upvotes: 0

Christien
Christien

Reputation: 120

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

More info on this: doc

Upvotes: 1

Related Questions