美文网首页
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的测试

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