单选输入（按钮）开关/切换样式不适用于 IE答案

【问题标题】：Radio Input (Button) switch/toggle styling not Working on IE单选输入（按钮）开关/切换样式不适用于 IE
【发布时间】：2019-10-08 11:32:49
【问题描述】：

已编辑

Switch/Toggle Radio 输入按钮在其他浏览器上有效，但在 IE 上无效。

忘了提到我正在编辑旧的现有标记项目。我希望从 CSS 方面解决问题并在不修改标记的情况下解决问题（下面）尽可能多地使用它。

<div class="input-icon">
   <input type="checkbox" value="1" class="switch">
</div>

Please check my codeshttps://codepen.io/vrsotto/pen/qGpzeE

【问题讨论】：

您能否确认您的代码在其他浏览器上正常运行？我用 Chrome 和 Edge 测试它，你的切换按钮看起来像这样。 i.postimg.cc/ncT66WWm/102.png如果代码不正确，请尝试发布修改后的代码。
@Deepak-MSFT 是的。我附加的第一个屏幕截图来自 IE v11
我的意思是说你的代码不能正常工作，并且没有像你上面发布的那样在其他浏览器中正确显示切换按钮。所以预计你会得到同样的 IE 结果。我建议您发布一个可以与您上面发布的输出相匹配的代码。这样我们就可以再次尝试用IE进行测试以找到问题。
@Deepak-MSFT 抱歉，如果我的问题令人困惑。我唯一的问题是在 IE 上。在其他浏览器（如：FF 和 Chrome）上，我的收音机样式工作得很好。
stackoverflow.com/help/how-to-ask

标签： css internet-explorer radio-button togglebutton

【解决方案1】：

尝试使用以下代码进行测试可能会帮助您解决 Internet Explorer 的问题。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

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

input:checked + .slider {
  background-color: limegreen;
}

input:focus + .slider {
  box-shadow: 0 0 1px limegreen;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>



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

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

</body>
</html>

IE 11 中的输出：

【讨论】：

您在代码中使用的某些 CSS 属性在 IE 中不受支持，例如：外观。因此，您可以尝试将您的代码与我的代码进行比较，并在我的代码的帮助下修改它可能有助于解决问题。