pseudo class preceded by an element

Question

I'm trying to customize the radio and checkboxes using only css. I'm almost there except 2 little details: here is a markup sample:

    <section>
    <label class="cbox radio">
        <input name="how" type="radio" checked="checked" /> My first radio box
    </label>

    <label class="cbox radio">
        <input name="how" type="radio" /> My second radio box
    </label>

    <label class="cbox radio">
        <input name="how" type="radio" /> My third radio box
    </label>
</section>

<section>
    <label class="cbox box">
        <input name="check1" type="checkbox" checked="checked" /> My first box
    </label>

    <label class="cbox box">
        <input name="check2" type="checkbox" /> My second box
    </label>
</section>

Every thing works fine but i can't make it work when the box is checked. I'm trying to use this pseudo class:

*::before, *::after {
    box-sizing: border-box;
}

.cbox {
    display: block;
    position: relative;
    margin: 10px 0;
    padding-left: 35px;
    cursor: pointer;
}

.cbox > input {
    position: absolute;
    left: -9999px;
}

.cbox::before, .cbox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

.cbox.radio::before, .cbox.radio::after {
    border-radius: 50%;
}

.cbox::before {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #c1caca;  
}

.cbox::after {
    display: none;
    width: 12px;
    height: 12px;
    margin: 4px;
    background-color: #2e4a5d;
    box-shadow: inset 0 15px 23px -10px rgba(187,230,240,.3),0 2px 2px rgba(0,0,0,.1);
}

/*input:checked + .cbox::before, input:hover + .cbox::before, */
.cbox.on::before, .cbox:hover::before {
    background-color: #eaf1f6;
    border-color: #a0afbb;
}

/* input:checked + .cbox::after, */
.cbox.on::after {
    display: block;
}

And here the jquery

$(".cbox input").change(function() {
        if($(this).is(':checked')) $(this).parent('label').toggleClass('on');
});

1- is there a way to make this css work?

2- since the selector :checked is only supported on IE9+, is it recommended to use selectivizr ? or is there a better fallback solution?

Thanks a lot

Answer 1

Just ditch the ::after pseudo class:

.cbox.radio input:checked { display: none; }

<label class="cbox radio">
    <input name="how" type="radio" checked="checked" /> My first box
    <input name="how2" type="radio" /> My first box
</label>

Fiddle: https://jsfiddle.net/84x66oux/

Btw, you won't be able to customize radios/checkboxes without hiding them in the first place, and adding the whole style yourself. Check this codepen for example

Answer 2

You can try this one

    <style>
    /*****************************************
      RADIO BUTTONS
    ******************************************/
    input[type="radio"] {
      display: none;
    }
    input[type="radio"] + span {
      background-color: #fefefe;
      border: 1px solid;
      border-color: #ccc #fff #fff #ccc;
      border-radius: 50px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
      display: inline-block;
      float: left;
      margin-right: 7px;
      padding: 7px;
      position: relative;
      -webkit-appearance: none;
    }
    input[type="radio"]:checked + span {
      color: #f00;
    }
    input[type="radio"]:checked + span:after {
      background: #f00;
      border-radius: 50px;
      box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.75), inset -1px -1px 1px rgba(0, 0, 0, 0.75);
      content: " ";
      height: 10px;
      left: 2px;
      position: absolute;
      top: 2px;
      width: 10px;
    }
    label:hover input[type="radio"] + span {
      border-color: #900 #f00 #f00 #900;
    }
</style>
<label>
  <input type="radio" name="radio" value="1" checked> <span></span> Option first
</label>

Answer 3

$(".radio input").click(function() {
  if ($(this).is(':checked')) {
    $(".radio ").removeClass('on')
    $(this).parent('label').addClass('on');
  }
});

$(".box input").click(function() {
  if ($(this).is(':checked')) {
    $(this).parent('label').addClass('on');
  } else {
    $(this).parent('label').removeClass('on');
  }
});

*::before,
*::after {
  box-sizing: border-box;
}

.cbox {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

.cbox > input {
  position: absolute;
  left: -9999px;
}

.cbox::before,
.cbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

.cbox.radio::before,
.cbox.radio::after {
  border-radius: 50%;
}

.cbox::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #c1caca;
}

.cbox::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #2e4a5d;
  box-shadow: inset 0 15px 23px -10px rgba(187, 230, 240, .3), 0 2px 2px rgba(0, 0, 0, .1);
}


/*input:checked + .cbox::before, input:hover + .cbox::before, */

.cbox.on::before,
.cbox:hover::before {
  background-color: #eaf1f6;
  border-color: #a0afbb;
}


/* input:checked + .cbox::after, */

.cbox.on::after {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <label class="cbox radio">
    <input name="how" type="radio" /> My first radio box
  </label>

  <label class="cbox radio">
    <input name="how" type="radio" /> My second radio box
  </label>

  <label class="cbox radio">
    <input name="how" type="radio" /> My third radio box
  </label>
</section>

<section>
  <label class="cbox box">
    <input name="check1" type="checkbox" /> My first box
  </label>

  <label class="cbox box">
    <input name="check2" type="checkbox" /> My second box
  </label>
</section>