css3 :enabled与:disabled伪类选择器
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伪类选择器的更多相关文章
- 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 ...
- css3 巧用结构性伪类选择器
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: <style type="text/css" ...
- 如何使用CSS3中的结构伪类选择器和伪元素选择器
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...
- CSS3 新怎的伪类选择器
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. :last-of-type p:last-of-typ ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
随机推荐
- PHP代码修改后提交，无法立即生效
今天遇到一个坑爹的问题,就是我修改了PHP代码,提交到网站根目录以后,刷新浏览器居然无法立即生效,差不多得一分钟的样子再去刷新,才会看到更改后的效果. 出现这个问题的原因,是因为手头的项目需要较高的P ...
- HDU 5172 GTY's gay friends （线段树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5172 题意: 给你一个n个数的数组,m次询问,询问在[L, R] 这个区间里面有没有 [1, R-L+ ...
- 常见的七种Hadoop和Spark项目案例
常见的七种Hadoop和Spark项目案例 有一句古老的格言是这样说的,如果你向某人提供你的全部支持和金融支持去做一些不同的和创新的事情,他们最终却会做别人正在做的事情.如比较火爆的Hadoop.Sp ...
- MySQL主从复制之半同步模式
MySQL主从复制之半同步模式 MySQL半同步介绍: 一般情况下MySQL默认复制模式为异步,何为异步?简单的说就是主服务器上的I/O threads 将binlog写入二进制日志中就返回给客户端一 ...
- LinkedHashMap 源码分析
LinkedHashMap LinkedHashMap 能解决什么问题?什么时候使用 LinkedHashMap? 1)LinkedHashMap 按照键值对的插入顺序进行遍历,LinkedHashM ...
- dropna()函数
参数: axis: default 0指行,1为列 how: {‘any’, ‘all’}, default ‘any’指带缺失值的所有行;'all’指清除全是缺失值的 thr ...
- tail()函数
与head()函数类似,默认是取dataframe中的最后五行. 函数源码: def tail(self, n=): """ Returns last n rows &q ...
- 大数据架构师必读的NoSQL建模技术
大数据架构师必读的NoSQL建模技术 从数据建模的角度对NoSQL家族系统做了比较简单的比较,并简要介绍几种常见建模技术. 1.前言 为了适应大数据应用场景的要求,Hadoop以及NoSQL等与传统企 ...
- Window下，在TEMP路径下生成一个临时文件名
BOOL GetFullTempFileName(const TCHAR* strPrefix, std::wstring& strFullName) { TCHAR strTempFolde ...
- Android加载网络图片报android.os.NetworkOnMainThreadException异常
Android加载网络图片大致可以分为两种,低版本的和高版本的.低版本比如4.0一下或者更低版本的API直接利用Http就能实现了: 1.main.xml <?xml version=" ...