<div>Just a standard text which is read only.</div>
<div contenteditable="true">However you can edit this content! Go ahead and click me to change the text.</div>
<input placeholder="Placeholer text..." type="text">
body {
	font-family: arial;
}

div {
	padding: 15px;
}

div:read-only { background: lightgray; }
div:read-write { background: coral; color: #fff; }

input {
  border: 2px solid green;
  padding: 5px;
	margin: 10px 0 0 0;
}

input:placeholder-shown {
  border-color:red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.