零基础学习CSS(6)——:enabled、:disabled、:checked、:requeired、:optional、:defaul

最新推荐文章于 2021-12-21 19:39:25 发布

Dragon水魅

最新推荐文章于 2021-12-21 19:39:25 发布

阅读量428

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109013254

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

:enabled 选择器：https://man.ilovefishc.com/pageCSS3/dotenabled.html
:disabled 选择器：https://man.ilovefishc.com/pageCSS3/dotDisabled.html
:checked 选择器：https://man.ilovefishc.com/pageCSS3/dotChecked.html
:requeired 选择器：https://man.ilovefishc.com/pageCSS3/dotRequired.html
:optional 选择器：https://man.ilovefishc.com/pageCSS3/dotOptional.html
:default 选择器：https://man.ilovefishc.com/pageCSS3/dotDefault.html

:enabled 选择器和 disabled 选择器用于匹配启用和禁用的元素（大多在表单中匹配）：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 设置禁用与可用的样式 */
        :enabled {
            outline: 1px solid green;;
        }

        :disabled {
            background-color: #dddddd;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="enabled">可用：</label>
            <input type="text" name="enabled">
        </p> 
        <p>     
            <label for="disabled">禁用：</label>
            <input type="text" name="disabled" disabled>
        </p> 
        <button>可用按钮</button>
        <button disabled>不可用按钮</button>
    </form>
</body>
</html>

:check 选择器用于修改选中表单元素（单选、多选、下拉）的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置表单元素的选项被选中时的样式 */
        :checked {
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <form>
       <input type="radio" name="gender" value="male"><span>男人</span><br>
       <input type="radio" name="gender" value="femele"><span>女人</span><br>
       <hr>
       <input type="checkbox" name="fruit" value="egg"><span>鸡蛋</span><br>
       <input type="checkbox" name="fruit" value="apple"><span>苹果</span><br>
       <input type="checkbox" name="fruit" value="banana"><span>香蕉</span><br>
    </form>
</body>
</html>

:required 选择器和 :optional 选择器用于设置必填和可选的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置必填和可选的样式 */
        :required {
            outline: 3px solid red;
        }
        :optional {
            outline: 3px solid green;;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="required">必填：</label>
            <input type="text" name="required" required>
        </p>
        <p>
            <label for="potional">可选：</label>
            <input type="text" name="potional">
        </p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

在这里插入图片描述

:default 选择器用于修改默认元素的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置默认元素的样式 */
        :default {
            outline: 3px solid red;
        }
    </style>
</head>
<body>
    <form>
        <p>
            <label for="required">必填：</label>
            <input type="text" name="required" required>
        </p>
        <p>
            <label for="potional">可选：</label>
            <input type="text" name="potional">
        </p>
        <button type="submit">提交</button>
    </form>
</body>
</html>

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(6)——:enabled、:disabled、:checked、:requeired、:optional、:defaul

官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文:enabled 选择器：https://man.ilovefishc.com/pageCSS3/dotenabled.html:disabled 选择器：https://man.ilovefishc.com/pageCSS3/dotDisab
复制链接

扫一扫

专栏目录