Question

大家好我正在做一些自定义单选按钮样式和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，它不起作用。为什么？有解决方案吗谢谢！

Answer 1

试试这个：

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();

Answer 2

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

之后

＆＃13;

input[type="radio"]:checked+label { 
  color: red; 
  font-size: 60px;  
}

＆＃13;

<input id="radio1" type="radio"><label for="radio1">Radio 1</label>
<input id="radio2" type="radio"><label for="radio2">Radio 2</label>

＆＃13;

Answer 3

这在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);
});

FIDDLE

Jquery单选按钮焦点不起作用

3 个答案: