css - IE/Edge 中复选框失败的切换布局

Question

我正在尝试让复选框工作的 css 开关。可以在此处找到示例:

https://www.w3schools.com/code/tryit.asp?filename=FWCNHR9N3EYO

label元素内部有两个input元素的switch在ie/edge上不起作用。生成此代码后，我无法更改元素的顺序。但是必须有一个ie/edge解释与其他浏览器不同的css语句。

这适用于 ie/edge:

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider"></span>
</label>

这在 ie/edge 中不起作用:

<label class="switch">
  <input type="hidden">
  <input type="checkbox">
  <span class="slider"></span>
</label>

我该如何解决这个问题？

重要提示:HTML 元素的顺序不能更改，因为它是自动生成的。

提前致谢!

最好的问候罗伯托

Answer 1

尝试将 input 放在 span class 之后，如下所示可能会解决您的问题。

<label class="switch"> 
  <input type="checkbox" checked/>
  <span class="slider"></span>
  <input type="hidden">
</label>

通过这种方式，它可以在 IE 和 Edge 中工作。

您可以在您这边进行测试，看看它是否按照您的要求工作。