<input class="test" type="text" value="Regular input" />
<input class="test" type="text" value="Disabled input" disabled />
<input class="test" type="text" value="Readonly input" readonly />
<p class="test" contenteditable>Contenteditable paragraph</p>
<p class="test">Regular paragraph</p>
@import "compass/css3";

.test {
  display: block;
  margin-bottom: 1em;
  border: 1px solid silver;
  width: 100%;
  padding: .5em;
}

.test:read-only {
  background: tomato;
}

.test:read-write {
  background: lightgreen;
}

* {
  box-sizing: border-box;
}

body {
  padding: 1em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js