GIS君-Manchan's blog GIS君-Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱/GIS君

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
    • CSS选择器的优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
    • 属性选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
      • 输入控件状态
      • 输入值状态
    • 树结构伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-28
目录

输入伪类

本章将介绍与表单控件元素 (如<input>、<select>和<textarea>)相关的伪类,这 些伪类中很多都非常实用,掌握这些伪类是前端人员的必备技能。

# 输入控件状态

# 可用状态与禁用状态伪类:enabled和:disabled

:disabled伪类用于匹配设置disabled属性的元素,如:

:disabled {
    border: 1px solid lightgray;
    background: #f0f0f3;
}
1
2
3
4

:enabled不常用。

# 读写特性伪类:read-only 和:read-write

它们用于匹配输入框元素是否只读,还是可读可写。这两个伪类中间都有短横线,由于“只读”的 HTML属性是 readonly,中间没有短横线因此很多人会记混。所以有短横线这一点大家可以注意一下。

另外,这两个伪类只作用于<input>和<textarea>这两个元素。

# 占位符显示伪类:placeholder-shown

:placeholder-shown 伪类的匹配和 placeholder 属性密切相关,顾名思义就是“占位符显示伪类”,表示当输入框的 placeholder 内容显示的时候,匹配该输入框。

# 默认选项伪类:default

:default 伪类选择器只能作用在表单元素上,表示处于默认状态的表单元素。

# 输入值状态

# 选中选项伪类:checked

微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/12/01 16:05:30
URL定位伪类
树结构伪类

← URL定位伪类 树结构伪类→

最近更新
01
前端面试学习
01-02
02
Markdown首行缩进
12-01
03
缅怀 | 加强测绘工作 发展地理信息产业
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式