<div class="container">
  <p class="note"><strong>In the following, elements matching <code>:read-write</code> in your rbowser will get a green border. Elements that match <code>:read-only</code> will get a red border. The result differs among browsers. For each case, we've stated what <em>should</em> happen, but, again, the result depends on your browser.</strong></p>

  <p>The following input is enabled and editable. It should match <code>:read-write</code> and have a green border.</p>
  <input type="text" value="normal (editable) input">

  <hr>

  <p>The following input is <strong>disabled</strong>. It should <em>not</em> match <code>:read-write</code>.</p>
  <input type="text" value="disabled input" disabled >

  <hr>

  <p>The following is a read-only input. It has the <code>read-only</code> attribute set, so it should match <code>:read-only</code>, but not <code>:read-write</code>.</p>
  <input type="text" value="read-only input" readonly >

  <hr>

  <p>The following <code>div</code> is editable using <code>contenteditable</code>. It should match <code>:read-write</code> and have a green border.</p>
  <div class="element" contenteditable>
    Content Editable div
  </div>

  <hr>

  <p>The following <code>div</code> is not editable. It is a regular element which should not match <code>:read-write</code>. It should match <code>:read-only</code> and have a grey background color.</p>
  <div class="element">
    Regular div
  </div>

  <hr>
</div>
body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

.note {
  font-style: 1.5em !important;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  padding: 0 0 3em 0;
}

input[disabled] {
  background-color: white;
}

input,
div {
  padding: .5em 1em;
  height: 30px;
  color: grey;
}

div:not(.container) {
  border: 5px solid #aaa;
}

.element {
  padding: 20px;
}

input:read-write,
.element:read-write {
  border: 5px solid green;
}

input:-moz-read-write,
.element:-moz-read-write {
  border: 5px solid green;
}

input:read-only,
.element:read-only {
  border: 5px solid tomato;
}

input:-moz-read-only,
.element:-moz-read-only {
  border: 5px solid tomato;
}