well, this comment-title-thing is crazy cool!

dabblet.css

/**
 * well, this comment-title-thing is crazy cool!
 */

body,
input,
button {
	font-size: 24px;
	box-sizing: content-box;
}

[data-state=disabled] {
	opacity: .5;
}

[data-state=readonly] {
	opacity: .5;
}

input {
	height: 36px;
	border: 0;
	padding: 8px 12px;
	margin: 0;
	box-shadow: 0 0 4px rgba(0, 0, 0, .4) inset;
	border-radius: 2px;
	line-height: 36px;
}

button {
	height: 36px;
	padding: 8px 12px;
	margin: 0;
	border: 0;
	background: linear-gradient(top, #06a, #059);
	color: #fff;
	line-height: 36px;
	border-radius: 2px;
}

button:active {
	background: linear-gradient(top, #048, #059);
}

dabblet.html

<input>
<input data-state="readonly" value="http://short.url.to/copy" readonly>
<button data-state="disabdled" disabled>Disabled Button</button>

settings.json

{"view":"split","fontsize":"100","seethrough":"1","prefixfree":"1","page":"all"}