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

小灰灰 2024-02-19 16:24 6阅读 0赞

### 伪类-:disabled | :enabled 伪类 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
**:disabled 选择器**  
定义和用法  
:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。  
浏览器支持  
![在这里插入图片描述][2019012310405877.png]  
所有主流浏览器均支持 :disabled 选择器，除了 IE8 及更早的版本。  
实例  
为所有 type=“text” 的被禁用的 input 元素设置背景色：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    input[type="text"]:enabled
    {
    background:#ffff00;
    }
    input[type="text"]:disabled
    {
    background:#dddddd;
    }
    </style>
    </head>
    <body>
    
    <form action="">
    First name: <input type="text" value="Mickey" /><br>
    Last name: <input type="text" value="Mouse" /><br>
    Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
    </form>
    
    </body>
    </html>

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

**:enabled 选择器**  
定义和用法  
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。  
浏览器支持  
![在这里插入图片描述][20190123104144475.png]  
所有主流浏览器均支持 :enabled 选择器，除了 IE8 及更早的版本。  
实例  
为所有 type=“text” 的已启用的 input 元素设置背景色：

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

> 小程序应用

[防采集标记：黄菊华老师的课程和资料][Link 1]  
:enabled：不支持  
:disabled：不支持

> Wxml代码

> Wxss代码

view{
      margin: 10px;
      padding: 5px;
    }
    input:enabled{
      background-color: yellow;color: red;
    }
    input:disabled{
      background-color: gainsboro;color: gray;
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[2019012310405877.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/568f1b6b76894909a0a7afe44b7c191f.png
[20190123104115400.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a0da1155571f4f108ab11ee6e6a62491.png
[20190123104144475.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/08fcde6d928d42e4a8708a5eb567493b.png
[20190123104200151.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8033b7db969a4023bbc8426e08c87ef8.png
[Link 1]: http://www.4317.org/ke/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1766971073ec4f19bd08bac205d49bd1.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_-_disabled _ _enabled]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/90719284020b4b85860f24761d7cba10.png