css伪类focus的测试_javascript

<!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>

css伪类focus的测试_html_02

测试了一下，使用JavaScript代码调用button.focus()方法是无法看到这个focus效果的：

css伪类focus的测试_chrome_03

css伪类focus的测试_javascript_04

但是在Chrome开发者工具里手动选中:focus的checkbox可以看到focus效果：

css伪类focus的测试_chrome_05

上图的user agent stylesheet是Chrome浏览器自动设置的css style.

更多Jerry的原创文章，尽在：“汪子熙”:

css伪类focus的测试_html_06