css :enabled和:disabled伪类选择器

在Web表单中，有些表单元素（如输入框、密码框、复选框等）有“可用”和“不可用”这2种状态。默认情况下，这些表单元素都处在可用状态。

在CSS3中，我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式。

语法：

:disabled {

   style properties

}

:enabled {

   style properties

}

如：我们为“可用”状态的文本框添加一个外轮廓线outline，然后为“禁用”状态的文本框改变背景颜色。css代码如下：

input[type="text"]:enabled{

    outline:1px solid #63E3FF;

}

input[type="text"]:disabled{

    background-color:#FFD572;

}

css3 :enabled和:disabled实例

1.css3 :enabled实例

设置所有可用type="text"的input元素背景颜色：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>disable</title>

    <style>

        input[type="text"]:enabled{

            background:slateblue;

        }

    </style>

</head>

<body>

<form action="">

    姓名: <input type="text" value="Mick" /><br>

    密码: <input type="text" value="123456" /><br>

    国家: <input type="text"  value="中国" /><br>

</form>

</body>

</html>

　效果：

　

 

2.css :disabled实例

设置所有不可用type="text"的input输入元素的背景颜色：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>disable</title>

    <style>

        input[type="text"]:enabled{

            background:slateblue;

        }

        input[type="text"]:disabled{

            background:#dddddd;

        }

    </style>

</head>

<body>

<form action="">

    姓名: <input type="text" value="Mick" /><br>

    密码: <input type="text" value="123456" /><br>

    国家: <input type="text" disabled="disabled" value="中国" /><br>

</form>

</body>

</html>

　效果：

 

css3 :enabled与:disabled伪类选择器的更多相关文章

  1. CSS3(各UI元素状态伪类选择器受浏览器的支持情况)

    选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled ...

  2. css3 巧用结构性伪类选择器

    最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...

  3. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

  4. CSS3 新怎的伪类选择器

    :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. :last-of-type p:last-of-typ ...

  5. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  6. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  7. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  8. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  9. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

随机推荐

  1. [CSP-S模拟测试]:模板(ac)（线段树启发式合并）

    题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.他每天都被$katarina$大神虐,仗着自己学过一些姿势就给$katarina$大神出了一道题.有一棵$n$个节点的以$1$号节 ...

  2. 接上SQL SERVER的锁机制（一）——概述（锁的种类与范围）

    二.完整的锁兼容性矩阵(见下图) 对上图的是代码说明:见下图. 三.下表列出了数据库引擎可以锁定的资源. 名称 资源 缩写 编码 呈现锁定时,描述该资源的方式 说明 数据行 RID RID 9 文件编 ...

  3. P1080国王游戏

    传送 最大值最小什么的一看就是二分了qwq 然鹅并不知道怎么检查,所以我们换个思路 我们要求出最小的最大值,这肯定和大臣的排列有关,会不会有什么规律? 先看看只有两个大臣的情况 排列:1 2,ans1 ...

  4. Ehrenfeucht–Fraïssé game back-and-forth games

    w https://en.wikipedia.org/wiki/Ehrenfeucht–Fraïssé game

  5. QCOW2/RAW/qemu-img 概念浅析

    目录 目录 扩展阅读 RAW QCOW2 QEMU-COW 2 QCOW2 Header QCOW2 的 COW 特性 QCOW2 的快照 qemu-img 的基本使用 RAW 与 QCOW2 的区别 ...

  6. Android Bitmap变迁与原理解析（4.x-8.x）

    App开发不可避免的要和图片打交道,由于其占用内存非常大,管理不当很容易导致内存不足,最后OOM,图片的背后其实是Bitmap,它是Android中最能吃内存的对象之一,也是很多OOM的元凶,不过,在 ...

  7. Vue路由注意事项

    一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info&quo ...

  8. 使用 Spring HATEOAS 开发 REST 服务

    使用 Spring HATEOAS 开发 REST 服务 学习博客:https://www.ibm.com/developerworks/cn/java/j-lo-SpringHATEOAS/ htt ...

  9. Balanced Lineup poj3264 线段树

    Balanced Lineup poj3264 线段树 题意 一串数,求出某个区间的最大值和最小值之间的差 解题思路 使用线段树,来维护最大值和最小值,使用两个查询函数,一个查区间最大值,一个查区间最 ...

  10. Codeforces 840C 题解（DP+组合数学）

    题面 传送门:http://codeforces.com/problemset/problem/840/C C. On the Bench time limit per test2 seconds m ...