单选按钮动画在 ie11 或边缘中不起作用

Question

我创建了一个单选列表动画，它适用于除 ie11 和 edge 之外的所有浏览器。我在网上搜索了解决方案，但无法解决此兼容性问题。我希望有人能够提供带有解释的解决方案。我已经包含了下面的所有代码。

.vertical-radio-buttons div {
  display: block;
  padding: 0 0 5px 5px;
  clear: both
}

.vertical-radio-buttons span {
  display: block;
  padding-left: 0.8rem;
  cursor: inherit;
}

.vertical-radio-buttons label {
  font-size: rem-calc(16);
}

.vertical-radio-buttons input {
  float: left;
  width: 0.8rem;
  margin-left: -.08rem;
}

fieldset {
  border-color: transparent;
}


/*new*/

.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: verdana;
}

label {
  text-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .1);
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  margin-bottom: 5px;
  position: relative;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
}

input [type="radio"]::-ms-expand {
  display: none;
}

input[type="radio"]:after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transition: all .1s;
}


/* type_1 */

.type_1 {
  border: 2px solid #000;
}

.type_1:after {
  border: 5px solid goldenrod;
  transform: translate3d(50%, 50%, 0);
}

.type_1:checked:after {
  transform: translate3d(-50%, -50%, 0);
}


/* type_2 */

.type_2 {
  border: 2px solid #000;
}

.type_2:after {
  border: 5px solid #000;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
}

.type_2:checked:after {
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
}

<div class="vertical-radio-buttons">
  <fieldset>
    <form>
      <div><span><input class="type_1" type="radio" name="option1" checked><label for=""> How about once a week? Let's take it slow</label></span></div>
      <div><span><input class="type_1" type="radio" name="option1"><label for=""> How about a few times a month? Sound about right?</label></span></div>
      <div><span><input class="type_1" type="radio" name="option1"><label for=""> Once a month? I'd be okay with that. OK.</label></span></div>
      <div><span><input class="type_1" type="radio" name="option1"><label for=""> It's not you. It's me. How about a small break? 30-Days?</label></span></div>
      <div><span><input class="type_1" type="radio" name="option1"><label for=""> Unsubscribe? Are you sure it's over? "Sniff"</label></span></div>
    </form>
  </fieldset>
</div>

Answer 1

要重新设置input 的样式，通常最好使用通过for 属性链接的label。 你几乎做到了。

它避免处理浏览器S的行为。

首先是为每个输入添加一个 id 并将 id 值用作 for 属性的值，然后可以隐藏 input 并使用样式进行伪绘制。

使用box-shadow 的示例来模仿您的样式效果，因为使用了来自标签的伪。它还减少了动画所涉及的代码。

div {
  /* increase line or margin ? */
  line-height: 1.8em;
  margin: 0.25em 1em;
}

div span input {
  /* hide it */
  position: absolute;
  right: 100%;
}

input+label::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border: solid 1px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 1em 1em 0 6px white, inset 0 0 0 15px goldenrod, 0 0 0 ;/* you can add as many , could be rings Inside each others*/
  transition: 0.2s
}

input:checked+label:before {
  box-shadow: inset 0 0 0 4px white, inset 0 0 0 15px goldenrod, 0 0 3px ;
}

<div>
  <span>
          <input id="_1" class="type_1" type="radio" name="option1" checked >
          <label for="_1"> How about once using fully that label</label></span>
</div>
<div>
  <span>
          <input id="_2" class="type_1" type="radio" name="option1"  >
          <label for="_2"> How about styling that label too ?</label></span>
</div>
<div>
  <span>
          <input id="_3" class="type_1" type="radio" name="option1"  >
          <label for="_3"> How about cool is the <code>for</code> attribute ?</label></span>
</div>

Answer 2

input 不应该生成伪元素，:after 伪元素在 IE 和 Edge 中呈现不佳。您应该使用:checked 和:not(:checked) 来自定义您的单选按钮。我做了一个示例，你可以检查一下，它在 IE 和 Edge 中也能正常工作：

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
}

[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
}

[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: goldenrod;
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 100%;
    -webkit-transition: all .1s;
    transition: all .1s;
}

[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: translate3d(50%, 50%, 0);
    transform: translate3d(50%, 50%, 0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

<form>
    <p>
       <input type="radio" id="test1" name="radio-group" checked>
       <label for="test1">One</label>
    </p>
    <p>
       <input type="radio" id="test2" name="radio-group">
       <label for="test2">Two</label>
    </p>
       <input type="radio" id="test3" name="radio-group">
       <label for="test3">Three</label>
</form>