html - 单选按钮在 IE 和 Firefox 中显示有额外的轮廓

Question

这是我的单选按钮代码

<div class="question">
    <label for="gender" style="display: none">Gender</label>
    <fieldset class="two-radio">
        <legend>Gender</legend>
        <label>
            <input type="radio" id="gender" name="gender" class="radioInput" 
                ng-model="namedInsured.gender" value="Male" required> Male
        </label>
        <label>
            <input type="radio" id="gender" name="gender" class="radioInput" 
                ng-model="namedInsured.gender" value="Female" required> Female
        </label>
    </fieldset>
</div>

它在 chrome 中可以正常工作，但对于 IE，它会显示虚线轮廓，而在 firefox 中，当您选择单选按钮时它会显示轮廓，但在转到下一个元素后则不会。我在同一页面中也有其他单选按钮有同样的问题。那么有人可以帮我删除这些轮廓吗？预先感谢您的宝贵时间

Answer 1

Chromium 为聚焦的元素添加了轮廓，甚至像 div 这样的分组元素......我很惊讶它发生在 IE 和 Gecko 而不是 webkit ......

您的样式表必须使用 -webkit 前缀....(使用 webkit 开发人员工具来跟踪您的元素的样式规则...任何带有 -webkit- 前缀的内容都是 webkit 浏览器的专利。

删除焦点元素的轮廓使用

*:focus{outline:none}

在你的 bootstrap css 中。