IE11中CSS3 border-radius在toggle输入框不生效问题求助

I’ve run into the exact same frustrating issue with IE11’s spotty support for custom form control styles—let’s walk through the fixes that got my toggle buttons working as expected:

Key Issues & Targeted Fixes #

1. Fix appearance: none for IE11 #

IE11 doesn’t recognize the standard appearance: none property, so you need to add the IE-specific prefix and extra resets to hide the native checkbox styling:

• Add -ms-appearance: none; to the input rule
• Include outline: none; to remove IE’s default thick focus border
• (Optional) If you want to fully hide the native input while keeping it functional, add opacity: 0; (though your current positioning should work with just the prefix)

2. Fix Border-Radius & Box Sizing #

IE11 often miscalculates element dimensions when using border-radius, especially with borders. Add box-sizing: border-box; to both the input and .toggle-element to ensure borders don’t expand their total width/height. Also, make sure the input’s border-radius is exactly half its width/height (26px → 13px) to guarantee a perfect circle in IE.

3. Replace left Transition with transform #

IE11 has unreliable support for transitions on the left property. Switching to transform: translateX() will make the animation smoother and more consistent:

• Change the input’s transition to transition: transform 117ms ease;
• Replace left: 38px; in the active state with transform: translateX(34px); (38px initial target left minus 4px initial left = 34px translation)

4. (Optional) Use Semantic :checked Pseudo-Class #

Your current .On class works, but using the native :checked pseudo-class is more semantic and avoids relying on manual class toggling. IE11 fully supports :checked, so this is a clean upgrade.

Updated Working Code #

CSS #

.toggle-field { 
  position: relative; 
  padding-top: 0.35rem; 
}
.toggle-field .Toggle { 
  padding-left: 75px; 
  cursor: pointer; /* Add for better UX */
}
.toggle-field .toggle-element { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 68px; 
  height: 34px; 
  border-radius: 18px; 
  border: 2px solid #ccc; 
  box-sizing: border-box; /* Fix dimension calculation */
}
.toggle-field input { 
  -ms-appearance: none; /* IE11 custom appearance reset */
  appearance: none; 
  display: block; 
  position: absolute; 
  left: 4px; 
  top: 4px; 
  width: 26px; 
  height: 26px; 
  background: #ccc; 
  border-radius: 13px; /* Exact half of width/height */
  transition: transform 117ms ease; /* Smoother IE11 animation */
  border: none; 
  box-sizing: border-box;
  outline: none; /* Remove IE default focus border */
  cursor: pointer;
}
.toggle-field input:focus + .toggle-element { 
  border-color: #aaa; 
}
.toggle-field b { 
  position: absolute; 
  font-weight: normal; 
  line-height: 34px; 
  top: 1px; 
  left: 40px; 
  font-size: 0.65rem; 
}
/* Use :checked instead of .On for semantic control */
.toggle-field .Toggle input:checked { 
  transform: translateX(34px); 
  background: #2ea664; 
}
.toggle-field .Toggle input:checked ~ b { 
  left: 12px; 
}
/* Optional: Style the toggle element when checked */
.toggle-field .Toggle input:checked + .toggle-element {
  border-color: #2ea664;
}

HTML #

<div class="field toggle-field null">
  <label for="button1" class="Toggle">
    <input type="checkbox" id="button1" name="button1" value="on" checked>
    <span class="toggle-element"></span>
    <b>YES</b> Question goes here
  </label>
</div>

Final Quick Check #

Double-check that your <meta http-equiv="X-UA-Compatible" content="IE=edge"> tag is placed first in the <head> section—before any CSS or JavaScript files. This ensures IE11 uses its latest rendering engine instead of falling back to compatibility mode.

内容的提问来源于stack exchange，提问作者kbdev