html - Focus-Within 适用于 chrome 但不适用于 Firefox
问题描述
我有一个小的焦点选择器,用于每个页面的表单上的单选按钮,每个页面都有不同的颜色,具体取决于页面,它在 chrome 中运行良好,但在 Firefox 中没有。
#wedo-contact .frm_radio:focus-within{
background-color:#D81B2D!important;
}
#wedo-contact .frm_radio:-moz-focus-inner{
background-color:#D81B2D!important;
outline:none!important;
}
<div id="frm_field_18_container" class="frm_form_field form-field frm_top_container horizontal_radio">
<div id="field_yhi3q_label" class="frm_primary_label">I would like to talk to you about
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_yhi3q_label" role="group"> <div class="frm_radio" id="frm_radio_18-0"><label for="field_yhi3q-0"> <input type="radio" name="item_meta[18]" id="field_yhi3q-0" value="WEB DESIGN & DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid"> WEB DESIGN & DEVELOPMENT</label></div>
<div class="frm_radio" id="frm_radio_18-1"><label for="field_yhi3q-1"> <input type="radio" name="item_meta[18]" id="field_yhi3q-1" value="APP DESIGN & DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid"> APP DESIGN & DEVELOPMENT</label></div>
<div class="frm_radio" id="frm_radio_18-2"><label for="field_yhi3q-2"> <input type="radio" name="item_meta[18]" id="field_yhi3q-2" value="SOCIAL MEDIA" data-invmsg="I would like to talk to you about is invalid"> SOCIAL MEDIA</label></div>
<div class="frm_radio" id="frm_radio_18-3"><label for="field_yhi3q-3"> <input type="radio" name="item_meta[18]" id="field_yhi3q-3" value="DIGITAL STRATEGY" data-invmsg="I would like to talk to you about is invalid"> DIGITAL STRATEGY</label></div>
<div class="frm_radio" id="frm_radio_18-4"><label for="field_yhi3q-4"> <input type="radio" name="item_meta[18]" id="field_yhi3q-4" value="360º CAMPAIGN STRATEGY" data-invmsg="I would like to talk to you about is invalid"> 360º CAMPAIGN STRATEGY</label></div>
<div class="frm_radio" id="frm_radio_18-5"><label for="field_yhi3q-5"> <input type="radio" name="item_meta[18]" id="field_yhi3q-5" value="PACKAGING" data-invmsg="I would like to talk to you about is invalid"> PACKAGING</label></div>
<div class="frm_radio" id="frm_radio_18-6"><label for="field_yhi3q-6"> <input type="radio" name="item_meta[18]" id="field_yhi3q-6" value="PRINT MEDIA" data-invmsg="I would like to talk to you about is invalid"> PRINT MEDIA</label></div>
<div class="frm_radio" id="frm_radio_18-7"><label for="field_yhi3q-7"> <input type="radio" name="item_meta[18]" id="field_yhi3q-7" value="ACTIVATIONS" data-invmsg="I would like to talk to you about is invalid"> ACTIVATIONS</label></div>
<div class="frm_radio" id="frm_radio_18-8"><label for="field_yhi3q-8"> <input type="radio" name="item_meta[18]" id="field_yhi3q-8" value="COPYWRITING" data-invmsg="I would like to talk to you about is invalid"> COPYWRITING</label></div>
<div class="frm_radio" id="frm_radio_18-9"><label for="field_yhi3q-9"> <input type="radio" name="item_meta[18]" id="field_yhi3q-9" value="GOOGLE ADWORDS" data-invmsg="I would like to talk to you about is invalid"> GOOGLE ADWORDS</label></div>
<div class="frm_radio" id="frm_radio_18-10"><label for="field_yhi3q-10"> <input type="radio" name="item_meta[18]" id="field_yhi3q-10" value="PHOTOGRAPHY" data-invmsg="I would like to talk to you about is invalid"> PHOTOGRAPHY</label></div>
<div class="frm_radio" id="frm_radio_18-11"><label for="field_yhi3q-11"> <input type="radio" name="item_meta[18]" id="field_yhi3q-11" value="VIDEOGRAPHY" data-invmsg="I would like to talk to you about is invalid"> VIDEOGRAPHY</label></div>
<div class="frm_radio" id="frm_radio_18-12"><label for="field_yhi3q-12"> <input type="radio" name="item_meta[18]" id="field_yhi3q-12" value="SEO" data-invmsg="I would like to talk to you about is invalid"> SEO</label></div>
<div class="frm_radio" id="frm_radio_18-13"><label for="field_yhi3q-13"> <input type="radio" name="item_meta[18]" id="field_yhi3q-13" value="ANIMATION" data-invmsg="I would like to talk to you about is invalid"> ANIMATION</label></div>
<div class="frm_radio" id="frm_radio_18-14"><label for="field_yhi3q-14"> <input type="radio" name="item_meta[18]" id="field_yhi3q-14" value="ICONOGRAPHY" data-invmsg="I would like to talk to you about is invalid"> ICONOGRAPHY</label></div>
<div class="frm_radio" id="frm_radio_18-15"><label for="field_yhi3q-15"> <input type="radio" name="item_meta[18]" id="field_yhi3q-15" value="ILLUSTRATION" data-invmsg="I would like to talk to you about is invalid"> ILLUSTRATION</label></div>
<div class="frm_radio" id="frm_radio_18-16"><label for="field_yhi3q-16"> <input type="radio" name="item_meta[18]" id="field_yhi3q-16" value="CONTENT CREATION" data-invmsg="I would like to talk to you about is invalid"> CONTENT CREATION</label></div>
</div>
</div>
有什么我缺少firefox所需的吗?我找不到太多关于此的信息
我的火狐版本:
解决方案
它似乎与 Firefox Mac (Safari) 上的行为和无线电输入焦点有关:https ://bugzilla.mozilla.org/show_bug.cgi?id=756028
Roman Komarov 找到的解决方案是使用 tabindex:https ://www.kizu.ru/keyboard-only-focus/#x
<div class="frm_radio" id="frm_radio_18-0" tabindex="0">
<label for="field_yhi3q-0" tabindex="-1">
<input type="radio" name="item_meta[18]" id="field_yhi3q-0" value="WEB DESIGN & DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid" />
WEB DESIGN & DEVELOPMENT
</label>
</div>
推荐阅读
- python - 已解决:如果找不到数据,sqlalchemy session.query...first() 会崩溃
- git - 错误:无法锁定配置文件 .git/config:没有这样的文件或目录
- c# - 如何在 DocuSign 中预填充带有验证的字段?
- java - 如何在 Clojure 中使用 java.util.stream.Stream?
- ruby-on-rails - 如何在 API 模式下在 Rails 应用程序中实现 JWT 身份验证
- c - 检查字符串是否为空,然后继续
- hyperlink - Maximo启动中心中的超链接?
- javascript - 为 SASS(编译、Prod 中的缩小)、JS(Concat + 缩小)和多个 Vue 单页应用程序构建 Webpack 4 配置
- python - Python - 多处理过程模块 - 未定义函数变量?
- flutter - Flutter Run - 失去与设备的连接(模拟器 iPhone 11 Pro Max)