Переключить раскладку для флажка сбой в IE / Edge

Question

Я пытаюсь заставить css-переключатель работать с флажками.Пример можно найти здесь:

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

Переключатель с двумя входными элементами внутри элемента метки не работает с ie / edge.Поскольку этот код генерируется, я не могу изменить этот порядок элементов.Но должен быть оператор css, т. Е. / Edge интерпретирует не так, как другие браузеры.

Это работает на 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 span , как показано ниже, может решить вашу проблему.

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

Таким образом, он работает как в IE, так и в Edge.

Вы можете проверить на своей стороне, что он работает в соответствии с вашими требованиями илинет.