有什么方法可以突出显示焦点输入的 field/div 吗？

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 的方法，但可能还有其他方法可以达到此结果。

首先，我制作了一个 class .gray，我在 jquery 部分使用了它。如果您使用它，请务必包含 <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

如果需要，可以将 remove/addClass 替换为 css('background', 'gray');

note this may not be supported in older browsers especially older versions of IE (below 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

有什么方法可以突出显示焦点输入的 field/div 吗？

Is there a way where I can highlight the field/div of the focused input?

html

css

focus

highlight