从头学前端-37：在表单中常用的伪类选择器

最新推荐文章于 2022-07-17 14:40:36 发布

一碗周.

最新推荐文章于 2022-07-17 14:40:36 发布

阅读量511

点赞数 2

分类专栏：从头学前端文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_46163658/article/details/121820635

版权

从头学前端专栏收录该内容

55 篇文章 21 订阅

订阅专栏

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第三十七篇-《在表单中常用的伪类选择器》

本篇文件介绍关于表单输入的伪类，主要介绍三种常用的，具体如下：

:enabled和:disabled
:read-only和:read-write
:checked

:enabled和:disabled

:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用状态，这组为了使完全对立的。

:enabled伪类的实际用处并不大，因为大多元素默认都是可用的，所以写不写意义并不大。

如下代码展示了:enabled和:disabled的用法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>:enabled和:disabled的用法</title>
  <style>
    input:enabled {
      outline: none;
    }

    input:disabled {
      /* 禁用状态背景为灰色 */
      background-color: gray;
    }
  </style>
</head>

<body>
  <input type="text"
         placeholder="可用状态">
  <input type="text"
         disabled
         placeholder="禁用状态">
</body>

</html>

代码运行结果如下所示：

01_enabled和disabled的用法.png

由上图我们看到禁用状态的<input>的背景颜色为灰色。

:read-only和:read-write

:read-only和:read-write一这组伪类选择器分别表示只读和可写状态，同样的:read-write也很鸡肋，因为默认就是可读写，示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>:read-only和:read-write</title>
  <style>
    input:read-write {
      outline: none;
    }

    /* 只读状态 */
    input:read-only {
      color: red;
      outline: none;
    }
  </style>
</head>

<body>
  <input type="text"
         value="读写状态">
  <input type="text"
         readonly
         value="只读状态">
</body>

</html>

代码运行结果如下所示：

02_read-only和read-write伪类.png

我们可以看到，只读的<input>的文字颜色为红色。

:checked

:checked伪类可以说是众多伪类选择器中使用频率很高的一个伪类选择器，该选择器表示选中的状态，就比如下面这个例子：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>checked伪类</title>
  <style>
    input:checked {
      /* 为选中的增加阴影 */
      box-shadow: 2px 2px 2px 2px lightcoral;
    }
  </style>
</head>

<body>
  <input type="checkbox">
  <input type="checkbox"
         checked>
</body>

</html>

03_checked伪类.png

关于:checked伪类，最佳实践是配合<label>元素来实现，现在我们就通过:checked和<label>元素来实现一个开关的效果。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <title>开关</title>
  <style>
    [type="checkbox"] {
      width: 44px;
      height: 26px;
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    /* 开关样式 */
    .cs-switch {
      display: inline-block;
      width: 44px;
      height: 26px;
      border: 2px solid;
      border-radius: 26px;
      background-color: currentColor;
      box-sizing: border-box;
      color: silver;
      transition: all .2s;
      cursor: pointer;
    }

    .cs-switch::before {
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #fff;
      transition: margin-left .2s;
    }


    :checked+.cs-switch {
      color: blueviolet;
    }

    /* 选中移动 */
    :checked+.cs-switch::before {
      margin-left: 18px;
    }

    /* 禁用状态 */
    :disabled+.cs-switch {
      opacity: .4;
      cursor: not-allowed;
    }
  </style>
</head>

<body>
  <!-- 普通状态 -->
  <input type="checkbox"
         id="switch">
  <label class="cs-switch"
         for="switch"></label>
  <!-- 选中状态 -->
  <input type="checkbox"
         id="switch1"
         checked>
  <label class="cs-switch"
         for="switch1"></label>
  <!-- 禁用状态 -->
  <input type="checkbox"
         id="switch2"
         disabled>
  <label class="cs-switch"
         for="switch2"></label>
  <!-- 选中禁用状态 -->
  <input type="checkbox"
         id="switch3"
         checked
         disabled>
  <label class="cs-switch"
         for="switch3"></label>
</body>

</html>

运行效果如下所示：

04_开关.png

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

关于v-model语法糖的知识点，这次应该说全了

一碗周.

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
从头学前端-37：在表单中常用的伪类选择器

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~这是【从头学前端】系列文章的第三十七篇-《在表单中常用的伪类选择器》本系列文章在掘金首发，编写不易转载请获得允许本篇文件介绍关于表单输入的伪类，主要介绍三种常用的，具体如下：:enabled和:disabled:read-only和:read-write:checked:enabled和:disabled:enabled和:disabled一这组伪类选择器分别表示禁用状态与可用.
复制链接

扫一扫