美文网首页
css伪类focus的测试

css伪类focus的测试

作者: 华山令狐冲 | 来源:发表于2021-02-15 10:31 被阅读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的原创文章,尽在:"汪子熙":


相关文章

  • 强大的CSS:focus-visible伪类真的太6了!

    一、快速了解CSS :focus-visible伪类 :focus-visible伪类是非常年轻的一个伪类,目前仅...

  • css伪类focus的测试

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

  • SAP Spartacus里的focus-within

    用一个简单的HTML来测试这个伪类的使用: :focus - 将样式添加到获得焦点的元素 CSS伪元素:用于将特殊...

  • 伪类link,hover,active,visited,focu

    伪类link,hover,active,visited,focus的区别 例一: /css/a:link{colo...

  • Day7

    CSS伪类: Love Hate原则: focus的使用:代表当文本框获得焦点的时候,会出现什么CSS属性。 CS...

  • CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及 标签的:link、v...

  • 神奇的伪类 :focus-within

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。今天介绍一个神奇的选择器 :focus-wit...

  • 认识css3伪元素

    css3伪元素 css2的规定为单冒号表示,而css3已经明确表示伪类使用单冒号,伪元素使用双冒号,本次所有测试双...

  • 伪类link、hover、focus、visited、activ

    阅读原文 CSS伪类用于向某些选择器添加特殊的效果。 :active 向被激活的元素添加样式。 :focus 向...

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

网友评论

      本文标题:css伪类focus的测试

      本文链接:https://www.haomeiwen.com/subject/ooejbktx.html