{"id":166069,"date":"2014-03-17T12:40:34","date_gmt":"2014-03-17T19:40:34","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=166069"},"modified":"2021-08-04T10:25:53","modified_gmt":"2021-08-04T17:25:53","slug":"read-write-read","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/read-write-read\/","title":{"rendered":":read-write \/ :read-only"},"content":{"rendered":"\n<p>The <code>:read-write<\/code> and <code>:read-only<\/code> selectors are two mutability pseudo-classes aiming at making form styling easier based on <code>disabled<\/code>, <code>readonly<\/code> and <code>contenteditable<\/code> HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky.<\/p>\n\n\n\n<p>According to the official CSS Specifications, a <code>:read-write<\/code> selector will match an element when:<\/p>\n\n\n\n<ul><li>it is either an <code>input<\/code> which has <code>readonly<\/code> nor <code>disabled<\/code> attributes.<\/li><li>it is a <code>textarea<\/code> which has neither <code>readonly<\/code> nor <code>disabled<\/code>\n<\/li><li>it is any other editable element (thanks to the <code>contenteditable<\/code> attribute)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax-amp-example\">Syntax &amp; Example<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Any element that is not writable *\/\n:read-only { }\n\n\/* ... so you might want to scope it *\/\ninput:read-only, \ntextarea:read-only,\n[contenteditable]:read-only {\n  cursor: not-allowed;\n}\n\n\/* Any enabled text input \n   or enabled textarea \n   or element with the contenteditable attribute *\/\n:read-write {\n  background: white;\n  cursor: text;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-read-only-write\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">36<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">3*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">13<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">9.0-9.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>There is a major difference between what is recommended in the specifications and what the browsers actually do. For instance, if we stick to the specs, every element which is user-editable but disabled (<code>disabled<\/code> or <code>readonly<\/code>) or simply not user-editable should be targeted by an unqualified <code>:read-only<\/code> selector.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><\/th><th>Chrome<\/th><th>Firefox<\/th><th>Safari<\/th><th>Opera<\/th><\/tr><\/thead><tbody><tr><td><code>input<\/code><\/td><td>:read-write<\/td><td>:read-write<\/td><td>:read-write<\/td><td>:read-write<\/td><\/tr><tr><td><code>input[disabled]<\/code><\/td><td>:read-write<\/td><td>:read-write<\/td><td>:read-write<\/td><td>:read-write<\/td><\/tr><tr><td><code>input[readonly]<\/code><\/td><td>:read-only<\/td><td>:read-only<\/td><td>:read-only<\/td><td>:read-only<\/td><\/tr><tr><td><code>[contenteditable]<\/code><\/td><td>\u2014<\/td><td>:read-write<\/td><td>\u2014<\/td><td>:read-only<\/td><\/tr><tr><td><code>*<\/code><\/td><td>\u2014<\/td><td>:read-only<\/td><td>\u2014<\/td><td>:read-only<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Meanwhile, only Firefox seems to do so, and apparently not too well either since it considers a <code>disabled<\/code> input as <code>:read-write<\/code>. Regarding Opera not tagging a <code>contenteditable<\/code> element as <code>:read-write<\/code>, it&#8217;s simply because it doesn&#8217;t support <code>contenteditable<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_nHuCI\" src=\"\/\/codepen.io\/anon\/embed\/nHuCI?height=450&amp;theme-id=1&amp;slug-hash=nHuCI&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed nHuCI\" title=\"CodePen Embed nHuCI\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The :read-write and :read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky. According to the official CSS Specifications, a :read-write selector will match an element when: it is either an [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":14263,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[5160,5161,1450],"acf":[],"jetpack-related-posts":[{"id":14180,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","url_meta":{"origin":166069,"position":0},"title":":enabled","date":"April 18, 2013","format":false,"excerpt":"The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click. So when\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15978,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/saving-contenteditable-content-changes-as-json-with-ajax\/","url_meta":{"origin":166069,"position":1},"title":"Saving contenteditable Content Changes as JSON with Ajax","date":"January 10, 2012","format":false,"excerpt":"Elements with the contenteditable attribute can be live-edited right in the browser window. But of course those changes don't affect the actual document on your server, so those changes don't persist with a page refresh. One way to save the data would be to wait for the return key to\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":166069,"position":2},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":259152,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/caret-color\/","url_meta":{"origin":166069,"position":3},"title":"caret-color","date":"August 18, 2017","format":false,"excerpt":"The caret-color property in CSS changes the color of the cursor (caret) in inputs, texareas, or really any element that is editable, like: input, textarea, [contenteditable] { caret-color: red; } The color of the caret generally matches the color of the text, but this property allows you to change those\u2026","rel":"","context":"In \"caret-color\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256635,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/","url_meta":{"origin":166069,"position":4},"title":":focus-within","date":"July 29, 2017","format":false,"excerpt":"The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus. form:focus-within { background: lightyellow; } Which works like this... <!-- this form will be selected --> <form action=\"#\"> <!-- when this input is\u2026","rel":"","context":"In \":focus-within\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14172,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/","url_meta":{"origin":166069,"position":5},"title":":disabled","date":"September 6, 2011","format":false,"excerpt":"The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user's interaction\u2026","rel":"","context":"With 10 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/166069"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=166069"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/166069\/revisions"}],"predecessor-version":[{"id":346116,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/166069\/revisions\/346116"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14263"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=166069"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=166069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}