【问题标题】：Is there a way where I can highlight the field/div of the focused input?有没有办法可以突出重点输入的字段/div？
【发布时间】：2015-03-24 21:04:55
【问题描述】：
<!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>
【问题讨论】：
标签：
html
css
focus
highlight
【解决方案1】：
您好，我尝试使用 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")
});
jsFiddle
如果您愿意，可以将 remove/addClass 替换为 css('background', 'gray');
注意旧版浏览器可能不支持此功能，尤其是旧版 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