css伪类focus的测试
css伪类focus的测试
Jerry Wang
发布于 2020-12-17 10:30:13
发布于 2020-12-17 10:30:13
<!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.
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-11-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读