css3 :enabled与:disabled伪类选择器
css3 选择器 enabled Disabled 伪类
2023-09-11 14:22:19 时间
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 - 基本选择器
- css3的选择器有哪几种?
- CSS3 选择器
- css3 - 设置字体间距
- CSS3选择器示例大全(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)
- 图解css3:核心技术与案例实战. 2.1 认识CSS选择器
- 图解css3:核心技术与案例实战. 2.2 基本选择器
- 图解css3:核心技术与案例实战. 1.4 CSS3的现状及未来
- 图解css3:核心技术与案例实战. 2.8 结构伪类选择器
- 图解css3:核心技术与案例实战. 2.11 属性选择器
- HTML5新特性、CSS3新特性
- 14款CSS3图片层叠切换动画
- CSS3属性选择器,伪元素,伪类,伪元素清除浮动(微重点)
- 《HTML5移动开发》—— 第1章 学习移动HTML5、CSS3和Java Script API之前的准备工作
- 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5 CSS3及其他
- 《HTML5+CSS3网页设计入门必读》——2.7 我们不使用这种语言
- 《HTML5与CSS3实战指南》——1.7 实际应用
- animation-fill-mode控制CSS3动画结束状态
- React动画相关(CSS3过渡、动画、eact-transition-group动画库、多DOM动画制作和编辑)
- 《响应式Web设计:HTML5和CSS3实践指南》——1.7节基于尺寸的响应式内边距
- 《响应式Web设计:HTML5和CSS3实践指南》——2.5节使用画布旋转文本
- 《响应式Web设计:HTML5和CSS3实践指南》——2.8节基于文本遮罩的文本纹理
- CSS3提交意见输入框样式
- CSS3注意点
- CSS3 transform 属性
- HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)
- CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
- css3 first-of-type选择器以及css3选择器中:first-child与:first-of-type的区别
- css3-css3属性选择器