微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类

待我称王封你为后i 2024-02-19 16:26 3阅读 0赞

### 小程序中的WXSS(css)选择器课程-伪类-:focus 伪类 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

定义和用法  
:focus 选择器用于选取获得焦点的元素。  
提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。  
浏览器支持  
![在这里插入图片描述][20190123105808173.png]  
所有主流浏览器都支持 :focus 选择器。  
注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。  
实例  
选择获得焦点的输入字段，并设置其样式：

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

效果图  
![在这里插入图片描述][20190123105828751.png]  
[防采集标记：黄菊华老师的课程和资料][Link 1]

### 小程序应用 ###

支持：不支持

> Wxml代码

> Wxss代码

view{
      margin: 10px;
      padding: 5px;
    }
    
    input:focus{
      background-color: yellow;
    }

效果图  
![在这里插入图片描述][20190123105927796.png]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]

![微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类][WXSS_css_-_-_focus]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190123105808173.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6d4249dcfc4149c0a031759e17d1cae0.png
[20190123105828751.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e08951af9bb14f47933eb3a330956d9e.png
[Link 1]: http://www.4317.org/ke/
[20190123105927796.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/22a141a73d304f04a8be150f1fc1ab50.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_-_focus]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6c59a396c0ce4b33a7b3fddf04aeaa4d.png