CSS

:read-write

:read-write

:read-writeCSS伪类表示能被用户编辑的元素(诸如文本输入框)。

/* Selects any element that is editable */ /* Supported in Firefox with a prefix */ input:-moz-read-write { background-color: #ccc; } /* Supported in Blink/WebKit/Edge without prefix */ input:read-write { background-color: #ccc; }

注意:这个选择器不只是选择文本输入框; 它将选择用户可以编辑的任何元素,例如一个设置了它的contenteditable属性的<p>元素。

语法

:read-write

实例

HTML

<input type="text" value="Type whatever you want here."> <input type="text" value="This is a read-only field." readonly> <p contenteditable="true">You can edit this paragraph!</p>

CSS

input { min-width: 25em; } input:-moz-read-write { background: cyan; } input:read-write { background: cyan; } p:-moz-read-write { background: lightgray; } p:read-write { background: lightgray; } p[contenteditable="true"] { color: blue; }

结果

规范

SpecificationStatusComment
HTML Living StandardThe definition of ':read-write' in that specification.Living StandardNo change.
HTML5The definition of ':read-write' in that specification.RecommendationDefines the semantic regarding HTML and constraint validation.
Selectors Level 4The definition of ':read-write' in that specification.Working DraftDefines the pseudo-class, but not the associated semantic.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support(Yes)(Yes)(Yes)-mozbug 312971Nightly build 1(Yes)(Yes)
Editable element (except for text input fields)No supportNo support(Yes)-mozbug 312971No supportNo supportNo support

FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support?(Yes)(Yes)(Yes)-mozbug 312971???
Editable element (except for text input fields)No supportNo supportNo support(Yes)-mozbug 312971No supportNo supportNo support