CSS3选择器:enabled 和 disabled

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Selector</title>
<style>
input[type="text"]:enabled{
background-color: yellow;
}
input[type="text"]:disabled{
background-color: dimgrey;
}
</style>
</head>
<body>
<script>
function radio_change(){
var radio1 = document.getElementById("radio11");
var radio2 = document.getElementById("radio2");
var text = document.getElementById("text");
var p = document.getElementById("p1");
if(radio1.checked){
text.disabled="";
text.value = "hello";
p.innerHTML = "haha";
}
else{
text.value = "";
text.disabled ="disabled";
}
}
</script>
<input type="radio" id="radio11" name="radio" onchange="radio_change()">use
<input type="radio" id="radio2" name="radio" onchange="radio_change()">unuse
<input type="text" id="text" disabled>
<p id="p1"></p>
</body>
</html>

时间: 2024-10-17 11:16:52

CSS3选择器:enabled 和 disabled的相关文章

css3 :enabled与:disabled伪类选择器

css :enabled和:disabled伪类选择器 在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3中,我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式. 语法: :disabled { style properties } :enabled { style properties } 如:我们为&quo

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为“id”的任意类型元素 .class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E  F 后代选择器(包含选择器

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s

[Selenium] CSS3 选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) 选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstname" 的所有元素. 1 * * 选择所有元素. 2 element p 选择所有 <p> 元素. 1 e

神通广大的CSS3选择器

作者:大额_skylar http://www.cnblogs.com/skylar/p/css3-selector.html 每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器,就可以简化我们的代码. 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度,如果有需要,可以在这里查看它的浏览器支持情况:「caniuse.com

CSS3选择器使用小结

CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id选择符(CSS1):以唯一标识符id属性等于myid的E对象作为选择符. 4  E.myclass是类class选择符(CSS1):以class属性包含myclass的E对象作为选择符. 5  E F:包含选择符(CSS1):选择所有被E元素包含的F元素. CSS3新增的通用选择器:同级元素通用选择

1-最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为"id"的任意类型元素 .class  类选择器 选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu