Question

<!doctype html>
<html>

<style>
    input:focus { 
        background: yellow;
    }

    div:focus { 
        background: gray;
    }
</style>

    **This section must be highlighted whenever i run the code**
    <div> 
        SOME TEXT<input type = 'text' autofocus>
    </div>
    <div>
        SOME TEXT <input type = 'text'>
    </div> 

</html>

Answer 1

您好我尝试使用jQuery，但可能还有其他方法可以达到此结果。

首先我创建了一个我在jquery部分使用的类.gray。如果您使用此功能，请务必加入<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<强> CSS

input:focus { 
    background: yellow;
}

.gray {
    background:gray;
}

<强>的jQuery

$('input').blur(function(){
    $('input').parent().removeClass("gray");
})

.focus(function() {     
    $(this).parent().addClass("gray")
});

jsFiddle

如果需要，可以用css('background', 'gray');

替换remove / addClass

注意 旧版浏览器可能不支持此功能，尤其是旧版本的IE（10以下）

input:focus {
  background: yellow;
}
.gray {
  background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('input').blur(function() {
      $('input').parent().removeClass("gray");
    })

    .focus(function() {
      $(this).parent().addClass("gray")
    });

  });
</script>
<div>
  SOME TEXT
  <input type="text" value="" autofocus>
</div>
<div>
  SOME TEXT
  <input type="text" value="">
  </div

有没有办法可以突出显示聚焦输入的字段/ div？

1 个答案: