CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器

CSS3选择器 :read-only选择器

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

示例演示

通过“:read-only”选择器来设置地址文本框的样式。

HTML代码：

<form action="#"><div><label for="name">姓名:</label><input type="text" name="name" id="name" placeholder="大漠" /></div><div><label for="address">地址:</label><input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /></div>
</form>

CSS代码：

form {width: 300px;padding: 10px;border: 1px solid #ccc;margin: 50px auto;
}
form > div {margin-bottom: 10px;
}input[type="text"]{border: 1px solid orange;padding: 5px;background: #fff;border-radius: 5px;
}input[type="text"]:-moz-read-only{border-color: #ccc;
}
input[type="text"]:read-only{border-color: #ccc;
}

结果演示

CSS3选择器 :read-write选择器

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

示例演示

使用“:read-write”选择器来设置不是只读控件的文本框样式。

HTML代码：

<form action="#"><div><label for="name">姓名:</label><input type="text" name="name" id="name" placeholder="大漠" /></div><div><label for="address">地址:</label><input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /></div>
</form>

CSS代码：

form {width: 300px;padding: 10px;border: 1px solid #ccc;margin: 50px auto;
}
form > div {margin-bottom: 10px;
}input[type="text"]{border: 1px solid orange;padding: 5px;background: #fff;border-radius: 5px;
}input[type="text"]:-moz-read-only{border-color: #ccc;
}
input[type="text"]:read-only{border-color: #ccc;
}input[type="text"]:-moz-read-write{border-color: #f36;
}
input[type="text"]:read-write{border-color: #f36;
}

结果演示：

转载于:https://www.cnblogs.com/guangzhou11/p/7358678.html

CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器相关推荐

CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
HTML5属性选择器以什么开头,CSS3 选择器属性选择器介绍
属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上 ...
html5子代选择器,伪类、子代、毗邻选择器 — IE6已逝，这些优秀的选择器你怎能不用？...
那些被遗忘的选择器在IE6~8"统治"网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃.而今,IE6已逝 ...
类别选择器在HTML中如何表示,CSS类别选择器
在实际应用中,不会像上节中所有段落都要是红色的,如果仅希望一部分段落是红色的,另一部分段落是蓝色的,该怎么做呢?这就需要用到类别选择器.用户可以自由定义类别选择器名称,但也必须遵守CSS的3个要素.下 ...
css基础选择器教程,CSS核心基础一些常见的选择器的使用小白教程
要想将CSS样式应用于特定的HTML元素,首先要找到该目标元素.在CSS中,执行这一任务的样式规则部分被称为选择器.在CSS中有很多的选择器,包含标记(标签)选择器.类别选择器.id选择器.通配符选择 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
jQuery选择器中的通配符[id*='id']及jquery选择器总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
html并集选择器怎么写,css案例学习之并集选择器
代码并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
html5复合选择器,传智播客解读Css基本选择器与复合选择器
当使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制时,我们经常会用到CSS选择器.为了方便初学者对选择器有所了解,传智播客将对选择器的几种类别进行详细介绍和说明. 一. Css基本选 ...

CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器

CSS3选择器 :read-only选择器

CSS3选择器 :read-write选择器

CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器相关推荐

最新文章

热门文章