Question

我试图仅使用css来自定义收音机和复选框。除了2个小细节之外，我几乎在那里：这是一个标记样本：

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

每件事情都运转正常，但是在选中此框后我无法正常工作。我试图使用这个伪类：

*::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;
}

这里是jquery

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

1-有没有办法让这个css工作？

2-因为选择器：选中仅支持IE9 +，是否建议使用选择性？还是有更好的后备解决方案？

非常感谢

Answer 1

放弃::after伪类：

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

小提琴：https://jsfiddle.net/84x66oux/

顺便说一句，如果不首先隐藏无线电/复选框，您将无法自定义无线电/复选框，并自行添加整个风格。 Check this codepen for example

Answer 2

你可以尝试这个

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

伪类以元素开头

3 个答案: