内对焦适用于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 &amp; DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid"> WEB DESIGN &amp; 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 &amp; DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid"> APP DESIGN &amp; 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版本:

在此处输入图片说明

艾丽·杜特

它似乎与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 &amp; DEVELOPMENT" data-invmsg="I would like to talk to you about is invalid" />
    WEB DESIGN &amp; DEVELOPMENT
  </label>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery touch Punch适用于Chrome和Firefox,但不适用于IE

来自分类Dev

JavaScript适用于Chrome,但不适用于Firefox

来自分类Dev

JScript Button适用于Chrome,但不适用于Firefox

来自分类Dev

HTML呈现问题-适用于Mozilla Firefox,但不适用于Google Chrome

来自分类Dev

CSS规则适用于IE,但不适用于Chrome / Firefox

来自分类Dev

JS适用于Chrome,但不适用于Firefox

来自分类Dev

jQuery touch Punch适用于Chrome和Firefox,但不适用于IE

来自分类Dev

JS适用于Chrome,但不适用于Firefox

来自分类Dev

JS适用于Firefox和Safari,但不适用于Chrome。这是我的网站

来自分类Dev

D3强制布局适用于Chrome,但不适用于Firefox

来自分类Dev

适用于chrome,但不适用于Firefox,Eventlistener,appendChild和style.backgroundColor

来自分类Dev

JavaScript适用于Chrome,但不适用于Firefox

来自分类Dev

HTML呈现问题-适用于Mozilla Firefox,但不适用于Google Chrome

来自分类Dev

单击切换适用于 Chrome 和 Safari 但不适用于 Firefox?

来自分类Dev

A-Frame appendChild 适用于 Firefox,但不适用于 Chrome

来自分类Dev

测试适用于“ $ f”,但不适用于“ $ @”

来自分类Dev

适用于 PHP 但不适用于脚本

来自分类Dev

媒体查询适用于Chrome,但不适用于移动设备

来自分类Dev

相同的代码适用于chrome DevTools控制台,但不适用于TamperMonkey

来自分类Dev

Express 中的 CORS 适用于 Safari,但不适用于 Chrome

来自分类Dev

docker 子域 api.localhost 适用于 chrome 但不适用于终端

来自分类Dev

SSL适用于Chrome,但有时适用于Firefox,不适用于IOS,Android或Blackberry

来自分类Dev

jQuery适用于Chrome和Safari,但不能适用于Firefox或IE?

来自分类Dev

CSS悬停图片不适用于Firefox,但适用于Chrome

来自分类Dev

jQuery Javascript仅适用于chrome和firefox,不适用于IE

来自分类Dev

CSS不透明度不适用于chrome,但适用于firefox

来自分类Dev

Javascript getElementById不适用于Chrome,但适用于Firefox

来自分类Dev

jQuery scrollTop()-仅适用于Firefox,不适用于Chrome

来自分类Dev

表格中网址的自动换行适用于chrome和safari,不适用于Firefox

Related 相关文章

  1. 1

    jQuery touch Punch适用于Chrome和Firefox,但不适用于IE

  2. 2

    JavaScript适用于Chrome,但不适用于Firefox

  3. 3

    JScript Button适用于Chrome,但不适用于Firefox

  4. 4

    HTML呈现问题-适用于Mozilla Firefox,但不适用于Google Chrome

  5. 5

    CSS规则适用于IE,但不适用于Chrome / Firefox

  6. 6

    JS适用于Chrome,但不适用于Firefox

  7. 7

    jQuery touch Punch适用于Chrome和Firefox,但不适用于IE

  8. 8

    JS适用于Chrome,但不适用于Firefox

  9. 9

    JS适用于Firefox和Safari,但不适用于Chrome。这是我的网站

  10. 10

    D3强制布局适用于Chrome,但不适用于Firefox

  11. 11

    适用于chrome,但不适用于Firefox,Eventlistener,appendChild和style.backgroundColor

  12. 12

    JavaScript适用于Chrome,但不适用于Firefox

  13. 13

    HTML呈现问题-适用于Mozilla Firefox,但不适用于Google Chrome

  14. 14

    单击切换适用于 Chrome 和 Safari 但不适用于 Firefox?

  15. 15

    A-Frame appendChild 适用于 Firefox,但不适用于 Chrome

  16. 16

    测试适用于“ $ f”,但不适用于“ $ @”

  17. 17

    适用于 PHP 但不适用于脚本

  18. 18

    媒体查询适用于Chrome,但不适用于移动设备

  19. 19

    相同的代码适用于chrome DevTools控制台,但不适用于TamperMonkey

  20. 20

    Express 中的 CORS 适用于 Safari,但不适用于 Chrome

  21. 21

    docker 子域 api.localhost 适用于 chrome 但不适用于终端

  22. 22

    SSL适用于Chrome,但有时适用于Firefox,不适用于IOS,Android或Blackberry

  23. 23

    jQuery适用于Chrome和Safari,但不能适用于Firefox或IE?

  24. 24

    CSS悬停图片不适用于Firefox,但适用于Chrome

  25. 25

    jQuery Javascript仅适用于chrome和firefox,不适用于IE

  26. 26

    CSS不透明度不适用于chrome,但适用于firefox

  27. 27

    Javascript getElementById不适用于Chrome,但适用于Firefox

  28. 28

    jQuery scrollTop()-仅适用于Firefox,不适用于Chrome

  29. 29

    表格中网址的自动换行适用于chrome和safari,不适用于Firefox

热门标签

归档