正文 

当前位置： 首页 > 知识 >

无法摆脱收音机和复选框中的 Firefox 焦点显示

     2023-05-07     80

关键词：

【中文标题】无法摆脱收音机和复选框中的 Firefox 焦点显示【英文标题】：Unable to get rid of Firefox focus display in radios and checkboxes 【发布时间】：2016-08-15 10:22:56 【问题描述】：

我正在尝试摆脱 Firefox 中的蓝色焦点轮廓。当我将大纲设置为 0 或无时，什么也没有发生。如果我将轮廓设置为其他内容，则会出现一个单独的轮廓（在示例中为方形绿色）。我也尝试使用盒子阴影。 但是，如果我尝试删除或修改边框，则什么也不会发生。 （我无法制作单独的边框或删除自动轮廓）在示例中，我什至尝试使用带有 !important 的内联样式。当我在 Firefox 的编辑器中运行 sn-p 时，焦点轮廓会立即显示出来。

$(function()
    $('#test').focus();
);
[type=radio]:focus 
        box-shadow:1px 1px 4px red;
        outline:1px solid green;
        border:0 !important;
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="question-preview2" /> 1<br>
<input id="test" type="radio" name="question-preview2" /> 2<br>
<input style="border:none !important;" type="radio" name="question-preview2" /> 3<br>

编辑： -moz 外观：无；几乎修好了……但收音机看起来还是有点不同（有凹陷的外观）

$(function()
    $('#test').focus();
);
input:focus-moz-appearance:none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="radio" name="question-preview2" /> 1 <- has sunken appearance<br>
<input type="radio" name="question-preview2" /> 2<br>
<input type="radio" name="question-preview2" /> 3<br>

【问题讨论】：

【参考方案1】：

尝试使用 ::-moz-focus-inner，然后你就不需要指定 :focus 伪选择器了。这对我有用。

【讨论】：

我刚试过 "::-moz-focus-inneroutline:none;border:none;" 但它似乎没有用。您可以将 sn-p 复制到您的答案中尝试一下。 还有其他非标准 CSS 伪选择器您可以尝试：developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring 如果您正确格式化选择器，这些选择器的一些组合应该可以解决问题。例如，使用我原始答案中的选择器，您需要执行input::moz-focus-inner，然后删除所有轮廓和框阴影。这也是从上面指向选择器的链接：css-tricks.com/forums/topic/button-padding-issue.【参考方案2】：

这似乎是不可能的。 This answer（以及紧随其后的那个）解释为什么这是不可能的。

【讨论】：

Ipad 和 Iphone：Javascript 图像输入按钮（收音机、复选框）无法正常工作

】Ipad和Iphone：Javascript图像输入按钮（收音机、复选框）无法正常工作【英文标题】：IpadandIphone:Javascriptimageinputbuttons(radio,checkbox)notworkingwell【发布时间】：2011-01-0512:59:37【问题描述】：我们正在使用一个网站，其中一些表单在... 查看详情

如何使用 Bootstrap 在 Django 中自定义复选框和收音机？

】如何使用Bootstrap在Django中自定义复选框和收音机？【英文标题】：HowtocustomcheckboxandradioinDjangousingBootstrap?【发布时间】：2019-08-2409:02:17【问题描述】：我正在尝试使用引导类自定义Django中的复选框和收音机。但是，它并没有奏... 查看详情

检测jQuery中的输入变化？

...一点？【问题讨论】：什么样的输入？文本框？复选框？收音机？文本区？让我们看看你到目前为止都想出了什么对不起，它是文本 查看详情

删除焦点文本区域上的 Firefox 发光

】删除焦点文本区域上的Firefox发光【英文标题】：RemoveFirefoxglowonfocusedtextarea【发布时间】：2011-03-2009:19:24【问题描述】：我想不出来这个。当textarea在Firefox中突出显示时，我正试图摆脱那种蓝色光芒。这是我的CSS：textareamargin:0... 查看详情

htmlevanlovely的codepen。自定义复选框和收音机表单元素-使用css3使复选框和收音机看起来很漂亮:)(代码片段)

查看详情

如何摆脱 Firefox 中的 <select> 元素轮廓？

】如何摆脱Firefox中的<select>元素轮廓？【英文标题】：HowdoIgetridof<select>elementoutlineinFirefox?【发布时间】：2014-05-0805:46:18【问题描述】：所以这里有一个演示问题的小提琴：http://jsfiddle.net/CVTrb/1/，单击并选择任何选项，... 查看详情

Twitter Bootstrap：如何为收音机和复选框添加标签？

】TwitterBootstrap：如何为收音机和复选框添加标签？【英文标题】：TwitterBootstrap:howtoputalabelforradioandcheckbox?【发布时间】：2012-12-1700:02:20【问题描述】：是否存在引入单选和复选框选项的TB方式？例如：Foo选项介绍：富一富二基本... 查看详情

如何在 AngularJS 中使用收音机和复选框绑定到复杂对象？

】如何在AngularJS中使用收音机和复选框绑定到复杂对象？【英文标题】：HowtobindtocomplexobjectswithradiosandcheckboxesinAngularJS?【发布时间】：2012-12-2914:16:24【问题描述】：假设我们有一组通过项目服务公开的项目：id:\'123\',name:\'Yeoman\',... 查看详情

具有多种收音机和文本输入类型的 Javascript 测验

】具有多种收音机和文本输入类型的Javascript测验【英文标题】：Javascriptquizwithmultipleradioandtextinputtypes【发布时间】：2021-03-2909:44:47【问题描述】：我用单选和复选框类型做了一个小测试/测验。我的代码中的单选按钮是必须检查... 查看详情

Android：EditText 重新启用后无法获得焦点

...个EditText和两个CheckBox（和一个按钮）的相对布局。每个复选框在选中时会启用/禁用一个Edit 查看详情

Jquery - 如何删除复选框和收音机上的多个味精返回

】Jquery-如何删除复选框和收音机上的多个味精返回【英文标题】：Jquery-HowdoIremovemultiplemsgreturnoncheckboxesandradio【发布时间】：2012-06-0713:27:53【问题描述】：感谢这个论坛上的人们，我在代码工作中遇到了主要的痛苦，但我遇到了... 查看详情

使用 JS 或 Jquery 将复选框和单选的值添加到标签

...前我尝试了很多，但我就是无法让它正常工作。我有一个收音机和一个复选框区域，如下所示：<formclass="form-horizontaltext-left"><divcl 查看详情

删除firefox中的虚线焦点边框

button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner border:none; 查看详情

如何更改蚂蚁设计中的单选按钮颜色？

...布时间】：2020-10-1722:52:38【问题描述】：我正在使用antd收音机和复选框。我想给他们自定义颜色。我找到了有关复选框的答案，但找不到更改单选按钮颜色的方法。有什么办法吗？【问题讨论】：【参考方案1】：您可以通过覆... 查看详情

从 Firefox 中的 Input type="range" 中删除焦点大纲

】从Firefox中的Inputtype="range"中删除焦点大纲【英文标题】：RemoveFocusOutlinefromInputtype="range"inFirefox【发布时间】：2014-12-1104:36:54【问题描述】：我知道还有其他类似的问题，但我已经尝试了他们建议的所有方法，但... 查看详情

输入文本中的焦点或自动对焦在 Firefox 16.0.2 中不起作用

】输入文本中的焦点或自动对焦在Firefox16.0.2中不起作用【英文标题】：FocusorAutofocusinInputTextdoesn\'tworkinFirefox16.0.2【发布时间】：2012-10-2521:29:11【问题描述】：我想在页面加载/启动后专注于输入文本。这是我的表格：<formmethod="... 查看详情

在 firefox 中设置复选框的样式 - 删除检查和边框

】在firefox中设置复选框的样式-删除检查和边框【英文标题】：Styleacheckboxinfirefox—removecheckandborder【发布时间】：2013-10-0908:14:38【问题描述】：如何在Firefox中设置复选框的样式，并使复选标记和边框消失？http://jsfiddle.net/moneyloti... 查看详情

在 iframe 主体上设置焦点和模糊事件不适用于 Firefox

】在iframe主体上设置焦点和模糊事件不适用于Firefox【英文标题】：SettingfocusandblureventsonIframebodynotworkingwithfirefox【发布时间】：2017-02-2814:43:44【问题描述】：我创建了一个可编辑的iFrame：<iframeframeborder="0"id="editor"></iframe>... 查看详情