:read-write
åºçº¿
广æ³å¯ç¨
èª 2020å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
:read-write CSS 伪类代表ä¸ä¸ªå
ç´ ï¼ä¾å¦å¯è¾å
¥ææ¬ç input å
ç´ ï¼å¯ä»¥è¢«ç¨æ·ç¼è¾ã
css
/* éæ©ææå¯ç¼è¾ç <input> å
ç´ */
/* Firefox ä¸éè¦å åç¼ */
input:-moz-read-write {
background-color: #bbf;
}
/* Supported in Blink/WebKit/Edge without a prefix */
input:read-write {
background-color: #bbf;
}
夿³¨ï¼è¿ä¸ªéæ©å¨ä¸ä»
ä»
éæ© <input> å
ç´ ï¼å®ä¹ä¼éæ©ææå¯ä»¥è¢«ç¨æ·ç¼è¾çå
ç´ ï¼ä¾å¦è®¾ç½®äº contenteditable 屿§ç <p> å
ç´ ã
è¯æ³
css
:read-write {
/* ... */
}
示ä¾
>HTML
html
<input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>
CSS
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;
}
ç»æ
è§è
| è§è |
|---|
| HTML > # selector-read-write > |
| Selectors Level 4 > # read-write-pseudo > |
æµè§å¨å ¼å®¹æ§
åè§
:read-only- HTML
contenteditable屿§