使用Bootstrap+自定义CSS移除单选框额外插入的span元素

原本你自己写的单选框切换器结构里并没有那些带Font Awesome图标的<span class="icons">元素，但页面编译后这些元素自动冒了出来，直接破坏了原本的切换器样式对吧？我来帮你一步步排查解决。

一、先定位这个span是哪来的 #

这些自动插入的元素一般是第三方插件、Bootstrap扩展组件或者模板自带的JS脚本搞的鬼，你可以按这个顺序排查：

• 检查项目引入的JS文件：比如有没有用到Bootstrap的自定义表单美化插件、bootstrap-select这类扩展，或者模板自带的表单装饰脚本，它们经常会给原生表单元素自动添加装饰性DOM。
• 用浏览器开发者工具追踪：选中那个<span class="icons">右键“检查”，在Elements面板里查看它的父元素绑定的事件/关联类名，也可以在Sources面板搜索icons、fa-circle-o这类关键词，找到插入DOM的代码位置。
• 临时禁用非必要JS：把项目里除Bootstrap核心JS外的脚本临时注释掉，刷新页面看span是否还会出现，快速定位搞事的脚本。

二、用custom.css临时屏蔽这个span（快速救急） #

如果暂时找不到根源，或者不想改动JS，直接用CSS把多余的span藏起来就行，给你的custom.css添加这段代码：

/* 隐藏自动插入的icons span，避免干扰原有样式 */
.pricing-switcher .fieldset .icons {
    display: none !important;
    position: absolute;
    z-index: -1; /* 彻底消除空间占用影响 */
}

这段代码会把那些带图标的span完全隐藏，不会干扰你原本的切换器布局和交互。

三、还原预期切换效果的细节确认 #

加了上面的CSS后，检查一下你原有选中状态的CSS规则：

.pricing-switcher input.pricing-input[type="radio"]:checked + label + .switch, 
.pricing-switcher input.pricing-input[type="radio"]:checked + label:nth-of-type(n) + .switch {
    transform: translateX(90px);
}

现在没有了中间的span元素，这个选择器能正常匹配到对应的.switch元素，切换滑动效果就能回到你预期的样子了。

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