CodePen

HTML

            
              <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>
            
          
!

CSS

            
              .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;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................