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>

它的工作finr在chrome但是对于它显示虚线轮廓和在Firefox中当你选择单选按钮而不是它显示轮廓但是在转到下一个元素之后它没有。我也有同一页面中的其他单选按钮有同样的问题。那么有人可以帮我删除这些大纲吗？提前感谢您的时间

Answer 1

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

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

删除焦点元素的轮廓使用

*：焦点{轮廓：无}

在你的bootstrap css中。

Answer 2

我得到了答案。所以问题出在firefox中，它是在IE中的轮廓，它是边界。

所以为了删除这两个我必须把

border：none; 大纲：无; 在我的样式表和挥动......一切都很完美。

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

2 个答案: