css伪类focus的测试
2021-02-15 本文已影响0人
华山令狐冲
<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<p>在文本框中点击，您会看到黄色的背景：</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>
</body>
</html>
测试了一下，使用JavaScript代码调用button.focus()方法是无法看到这个focus效果的：
但是在Chrome开发者工具里手动选中:focus的checkbox可以看到focus效果：
上图的user agent stylesheet是Chrome浏览器自动设置的css style.
更多Jerry的原创文章，尽在："汪子熙":
