Javascript Jquery单选按钮焦点不工作

大家好，我正在做一些自定义单选按钮样式和css:focus不起作用。因此，我想出了一些js解决方案，现在我有了：

// Focuse radio btn
  function focus() {
   $('.radio, .field-label').focusin(function(e) {
   //console.log(e.target);
   $(e.target).parent().animate({opacity: .5},400);
});

$('.radio, .field-label').focusout(function(e) {
  //console.log('focus out!');
  $('.radio, .field-label').parent().animate({opacity: 1},1000);
});
}

focus(); 

这是在Chrome上工作。但在其他浏览器中，如safari或mozilla，它不起作用。为什么？有什么解决办法吗？

---

谢谢

试试这个：

function focus() {
    $(document).on('focus', '.radio, .field-label', function(e) {
       //console.log(e.target);
       $(this).parent().animate({opacity: .5},400);
    });

    $(document).on('focusout', '.radio, .field-label', function(e) {
      //console.log('focus out!');
      $(this).parent().animate({opacity: 1},1000);
    });
}

focus(); 

---

你用简单的CSS尝试过这个吗？通过这种方式，可以设置位于选中单选按钮之后的标签样式

input[type=“radio”]：选中+标签{
颜色：红色；
字体大小：60px；
}

收音机1
收音机2

这在FF和Chrome中运行良好：

$(document).on('focusin', '.radio, .field-label', function() {
  $(this).parent().animate({
    opacity: .5
  }, 400);
});

$(document).on('focusout', '.radio, .field-label', function() {
  $(this).parent().animate({
    opacity: 1
  }, 1000);
});

---

你能提供一个工作的例子吗？如果答案解决了你的问题，考虑接受答案。下面是如何返回此处并对勾号/复选标记执行相同操作，直到其变为绿色。这将通知社区，找到了解决方案。否则，其他人可能会认为问题仍然悬而未决，并可能希望发布（更多）答案。您将获得积分，并鼓励其他人帮助您。欢迎来到Stack！