CSS 教程手册（新）: CSS速查总表; CSS 教程学习导读; CSS简介; CSS Id 和 Class选择器; CSS语法; CSS 创建; CSS Backgrounds(背景); CSS Text(文本); CSS Fonts(字体); CSS 链接(link); CSS 列表样式(ul); CSS Table(表格); CSS 盒子模型; CSS Border(边框); CSS 轮廓（outline）属性; CSS margin(外边距); CSS padding（填充）; CSS 分组和嵌套; CSS 尺寸 (Dimension); CSS Display(显示); CSS Position(定位); CSS Overflow; CSS Float(浮动); CSS 对齐; CSS 组合选择符; CSS 伪类; CSS 伪元素; CSS 导航栏; CSS 下拉菜单; CSS 提示工具; CSS 图片廊; CSS 图像透明/不透明; CSS 图像拼合技术; CSS 媒体类型; CSS 属性选择器; CSS打印; CSS用户界面; Only IE; Only Webkit; Only Firefox; CSS媒体查询; CSS 总结; CSS 手册导读; CSS 选择器; CSS 听觉参考手册; CSS Web安全字体组合; CSS 动画; CSS 函数; CSS 单位; CSS 颜色; CSS 颜色值; CSS 颜色名; CSS 颜色十六进制; CSS attr() 函数; CSS calc() 函数; CSS linear-gradient() 函数; CSS radial-gradient() 函数; CSS repeating-linear-gradient() 函数; border-top; scan; border-top-color; overflow-wrap; border-top-left-radius; text-size-adjust; border-top-right-radius; text-decoration-skip; text-underline-position; border-top-style; column-break-before; border-top-width; column-break-after; border-width; column-break-inside; bottom; text-fill-color; box-align; box-reflect; box-direction; tap-highlight-color; user-drag; box-flex; border-colors; box-flex-group; border-top-colors; box-lines; border-right-colors; box-ordinal-group; border-bottom-colors; border-left-colors; box-orient; scrollbar-3dlight-color; box-pack; scrollbar-darkshadow-color; box-shadow; scrollbar-highlight-color; box-sizing; scrollbar-shadow-color; caption-side; scrollbar-arrow-color; clear; scrollbar-arrow-color; clip; scrollbar-face-color; color; scrollbar-track-color; column-count; scrollbar-base-color; column-fill; behavior; column-gap; column-rule; column-rule-color; column-rule-style; column-rule-width; column-span; column-width; columns; content; counter-increment; counter-reset; cursor; direction; display; empty-cells; filter; flex; flex-basis; flex-direction; flex-flow; flex-grow; flex-shrink; flex-wrap; float; font; @font-face; font-family; font-size; font-size-adjust; font-stretch; font-style; font-variant; font-weight; grid-columns; grid-rows; hanging-punctuation; height; icon; justify-content; @keyframes; left; letter-spacing; line-height; list-style; list-style-image; list-style-position; list-style-type; margin; margin-bottom; margin-left; margin-right; margin-top; max-height; max-width; @media; min-height; min-width; nav-down; nav-index; nav-left; nav-right; nav-up; opacity; order; outline; outline-color; outline-offset; outline-style; outline-width; overflow; overflow-x; overflow-y; padding; padding-bottom; padding-left; padding-right; padding-top; page-break-after; page-break-before; page-break-inside; perspective; perspective-origin; position; punctuation-trim; quotes; resize; right; rotation; tab-size; table-layout; target; target-name; target-new; target-position; text-align; text-align-last; text-decoration; text-decoration-color; text-decoration-line; text-decoration-style; text-indent; text-justify; text-outline; text-overflow; text-shadow; text-transform; text-wrap; top; transform; transform-origin; transform-style; transition; transition-delay; transition-duration; transition-property; transition-timing-function; unicode-bidi; pointer-events; vertical-align; user-select; visibility; ime-mode; white-space; zoom; width; -webkit-appearance; word-break; @charset; word-spacing; text-stroke; word-wrap; text-stroke-width; z-index; text-stroke-color; writing-mode; <angle>; deg; grad; rad; turn; s; align-content; ms; <frequency>; align-items; Hz; align-self; kHz; all; <fraction>; animation; <grid>; animation-delay; fr; animation-direction; gr; animation-duration; <resolution>; animation-fill-mode; dpi; animation-iteration-count; dpcm; dppx; animation-name; unset; animation-play-state; <string>; <url>; animation-timing-function; <identifier>; appearance; calc(); backface-visibility; toggle(); background; counter(); background-attachment; counters(); attr(); <image>; background-blend-mode; image(); background-clip; image-set(); background-color; <gradient>; background-image; repeating-radial-gradient(); background-origin; <integer>; background-position; <percentage>; background-repeat; background-size; border; border-bottom; border-bottom-color; border-bottom-left-radius; border-bottom-right-radius; border-bottom-style; border-bottom-width; border-collapse; border-color; border-image; border-image-outset; border-image-repeat; page; border-image-slice; page-break-before; border-image-source; page-break-after; page-break-inside; border-image-width; border-left; border-left-color; border-left-style; border-left-width; border-radius; border-right; device-width; border-right-color; device-height; border-right-style; orientation; border-right-width; aspect-ratio; border-spacing; device-aspect-ratio; border-style; color-index; monochrome; initial; inherit; RGBA; Color Name; HEX; RGB; HSL; HSLA; transparent; currentColor; <length>; em; ex; ch; rem; vw; vh; vmax; vmin; cm; mm; q; in; pt; pc; px; <number>; .class 选择器; #id 选择器; * 选择器; element 选择器; element,element 选择器; 包含选择器（E F）; 子选择器（E>F）; 相邻选择器(E+F); [attribute] 选择器; [attribute=value] 选择器; [attribute~=value] 选择器; [attribute|=value]选择器; :link 选择器; :visited 选择器; :active 选择器; :hover 选择器; :focus 选择器; :first-letter 选择器; :first-line 选择器; :first-child 选择器; :before 选择器; :after 选择器; :lang 选择器; 兄弟选择器(E~F); [attribute^=value] 选择器; [attribute$=value] 选择器; ::placeholder选择器; [attribute*=value] 选择器; :first-of-type 选择器; :last-of-type 选择器; :only-of-type 选择器; :only-child 选择器; :nth-child() 选择器; :nth-last-child() 选择器; :nth-of-type()选择器; :nth-last-of-type() 选择器; :last-child 选择器; :root 选择器; :empty 选择器; :target 选择器; :enabled 选择器; :disabled 选择器; :checked 选择器; :not 选择器; ::selection 选择器; :out-of-range 选择器; :in-range 选择器; :read-write 选择器; :read-only 选择器; :optional 选择器; :required 选择器; :valid 选择器; :invalid 选择器; @page :first选择器; @page :left选择器; @page :right选择器; +
CSS长度; <length>; em; ex; ch; rem; vw; CSS角度; +
CSS时间; <time>; s; ms; CSS频率; CSS布局; CSS分辨率; CSS文本; CSS函数; CSS生成内容; CSS图像; CSS数字; !important; comment; @import; @page; @supports; 颜色关键字; 媒体类型; 条件Hack; 属性级Hack; 选择符级Hack; Bugs及解决方案列表; CSS技巧和经验列表; 其它技巧和经验列表; 参考资源列表

:read-only 选择器

:read-only 选择器用于选取设置了 "readonly" 属性的元素

编辑：

前端控更新时间：2019-01-17 14:13:59

具体内容
相关视频
相关知识
最新评论

:read-only 选择器

含义和使用：

:read-only 选择器用于选取设置了 "readonly" 属性的元素

表单元素可以设置 "readonly" 属性来定义元素只读

注意：目前，大多数浏览器, :read-only 选择器适用于 input 和 textarea 元素，但是它也适用于设置了 "readonly" 属性的元素

浏览器支持：

选择器
:read-only	不支持	-moz-	10.0	yes	yes

CSS 语法:

:read-only
{
css 声明;
}

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
input:read-only
{ 
background-color:pink;
}
</style>
</head>
<body>
	<p>将input元素设置read-only属性，设置为粉色</p>
<input readonly>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

推荐手册

:read-only 选择器

实例