CSS学习日记11-选择器4-伪类选择器5

最新推荐文章于 2021-11-15 23:04:33 发布

此时的你才是你

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量147

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107977767

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（四）伪类选择器
3.都有哪些呢？
1）:超链接伪类
2）结构伪类
3）表单伪类

表单属性样式

直接选择input，可用的不可用的都可以设置

<body>
   <form action="">
        <input type="text" disabled>
        <input type="text">
        <button>保存</button>
   </form>
</body>

<style>
            input:disabled {
                background: red;
            }
            input:enabled{
                background: black;
            }

        </style>

在这里插入图片描述

<input type="radio" name="animal" id="ji" checked>
        <label for="boy">鸡</label>
        <input type="radio" name="animal" id="ya">
        <label for="boy">鸭</label>

            input:checked+label{
                color: red;
            }

在这里插入图片描述

表单必选样式

注意：有优先级的问题，后面再说，

<body>
   <form action="">
        <input type="text" disabled>
        <input type="text">
<hr>
        
        <input type="radio" name="animal" id="ji" checked>
        <label for="boy">鸡</label>
        <input type="radio" name="animal" id="ya">
        <label for="boy">鸭</label>
        <input type="text" required>
        <button>保存</button>

   </form>
</body>

 <style>
           input:disabled {
                border: solid 1px #ddd !important;
            }
            input:required{
                border: solid 1px yellow;
            }
            input:optional{
                
                border: solid 1px red;
            }

        </style>

在这里插入图片描述

表单验证样式

 <input type="email">

           input:valid{
                background: yellow;
            }
            input:invalid{
                background: pink;
            }

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录