如何使此复选框样式在 Edge 中起作用？

Question

我将我的复选框样式设置为看起来像拨动开关，它在 Chrome、UC 浏览器、Safari for Windows 中工作得很好，在 Firefox 中有点不稳定，但可以接受。不幸的是，在 Edge 中它根本不起作用。

我查看了我正在使用的 CSS 属性，似乎所有属性都受 Edge 支持，所以我不明白我遗漏了什么。

.toggle{
      width:34px;
      height:16px;
      border-radius:40px;
      position:relative;
      -webkit-appearance: none;
      margin:2px 0 0 0px;
      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
      background: -webkit-linear-gradient(#c6c6c6,#e3e3e3);
      cursor:hand;cursor:pointer;pointer:hand;
      outline: 0;
    }
    .toggle:checked{
      background: -webkit-linear-gradient(#77178F,#AD73BB);
      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
    }
    .toggle:before {
      content:'';
      letter-spacing:1px;
      color: rgba(0,0,0,.15);
      font-size:10px;
      font-weight:100;
      text-shadow:1px 1px 1px rgba(255,255,255,1);
      width:7px;
      height:7px;
      padding:2px;
      top:2px;
      left:2px;
      position:absolute;
      border-radius:40px;
      background: linear-gradient(#ebebeb,#f1f1f1);
      box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2),
            -1px 1px 2px rgba(0, 0, 0, 0.3),
            inset 1px 1px 1px #ffffff;
      transition: all 0.4s;
    }
    .toggle:checked:before {
      left:20px;
      background:#f1f1f1;
    }
    .toggle:checked:after {
      background: linear-gradient(#d8eec4,#5fa718);
      box-shadow: inset -1px -1px 4px #417f0b,
            inset 1px 1px 2px #5b9f1a;
    }

<input type=checkbox class=toggle>

在我看来 -webkit-appearance:none 没有做它应该做的事情（隐藏原始复选框），但据说也支持。

如果有人对此问题有任何经验并能给我一些见解，我们将不胜感激。

Answer 1

最好隐藏一个复选框，用另一个元素（例如标签）将其包裹起来，然后为该复选框添加一个同级元素。您可以在此处找到复选框开关的示例 https://www.w3schools.com/howto/howto_css_switch.asp。

或者您可以调整以下代码：

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle input[type=checkbox] { 
  opacity: 0; /* or use display: none; to hide default checkbox */
  width: 0;
  height: 0;
}

.toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(#ebebeb, #f1f1f1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: #ffffff;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle input[type=checkbox]:checked + .slider {
  background: linear-gradient(#77178F,#AD73BB);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.toggle input[type=checkbox]:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.toggle .slider.round {
  border-radius: 34px;
}

.toggle .slider.round:before {
  border-radius: 50%;
}

<label class="toggle">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

Answer 2

作为解决方法，您可以添加一个标签来满足您的要求。通过这种方式，您可以将标签与复选框连接起来，并将样式应用于标签而不是复选框本身。

这是我的测试代码。

CSS.

    .toggle {
        visibility: hidden;
        opacity: 0;           
    }
        .toggle + label {
            width: 34px;
            height: 16px;
            border-radius: 40px;
            position: relative;
            box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.4);
            background: linear-gradient(#c6c6c6,#e3e3e3);
            cursor: pointer;
            outline: 0;
            display: inline-block;               
        }

            .toggle + label:before {
                content: '';
                letter-spacing: 1px;
                color: rgba(0,0,0,.15);
                font-size: 10px;
                font-weight: 100;
                text-shadow: 1px 1px 1px rgba(255,255,255,1);
                width: 7px;
                height: 7px;
                padding: 2px;
                top: 2px;
                left: 2px;
                position: absolute;
                border-radius: 40px;
                background: linear-gradient(#ebebeb,#f1f1f1);
                box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2), -1px 1px 2px rgba(0, 0, 0, 0.3), inset 1px 1px 1px #ffffff;
                transition: all 0.4s;
            }

        .toggle:checked + label {
            background: linear-gradient(#77178F,#AD73BB);
            box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
        }
    .toggle:checked + label:before {
        left: 20px;
        background: #f1f1f1;
    }
    .toggle:checked + label:after {
        background: linear-gradient(#d8eec4,#5fa718);
        box-shadow: inset -1px -1px 4px #417f0b, inset 1px 1px 2px #5b9f1a;
    }

HTML

<input type="checkbox" class="toggle" id="mycheckbox">
<label for="mycheckbox" />

Answer 3

将所选答案的另一个灵活变体添加到组合中：https://codepen.io/hawatt/pen/MWKyJJZ

HAML

.toggle-switch
  %input{type: 'checkbox',  id: 'away-from-desk' }
  %span.toggle-handle
  %label{'for' => 'away-from-desk'} Away from desk

SCSS

$toggle-width: 2.8rem;
$toggle-height: 1.5rem;
$toggle-handle-diameter: calc(#{$toggle-height} * 0.8);

.toggle-switch {
  position: relative;
  display: flex;
  align-items: center;
  input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: $toggle-width;
    height: $toggle-height;
    display: inline-flex;
    position: relative;
    border-radius: $toggle-height;
    overflow: hidden;
    outline: none;
    border: none;
    cursor: pointer;
    background-color: #c0c0c0;
    transition: all ease 0.3s;
    z-index: 0;
    text-indent: -5000px;
  }
  .toggle-handle {
    pointer-events: none;
    display: flex;
    position: absolute;
    z-index: 2;
    width: $toggle-handle-diameter;
    height: $toggle-handle-diameter;
    background: #fff;
    border-radius: 50%;
    left: 0;
    margin: 0 0.35rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all ease 0.3s;
  }
  input:checked,
  input.enabled {
    background-color: dodgerblue;
    & + .toggle-handle {
      left: calc(#{$toggle-width} - #{$toggle-handle-diameter} - 0.25rem);
    }
  }
  label {
    cursor: pointer;
  }
}

如何使此复选框样式在 Edge 中起作用？

How do I make this checkbox styling work in Edge?

css

checkbox

webkit-appearance

microsoft-edge