<!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>
最佳答案
您好，我尝试使用 jQuery 进行一些操作，但可能还有其他方法可以达到此结果。
首先我做了一个类.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")
});
如果需要，可以用 css('background', 'gray'); 替换 remove/addClass
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关于html - 有没有一种方法可以突出显示焦点输入的字段/div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29230451/