Color inheritance experiment

dabblet.css

/**
 * Color inheritance experiment
 */
html {
 	color: magenta;
 	font-size: 120%;
}
 
input, button, p, select {
 	font-size: inherit;
 	color: inherit;
 	/* don't set border color, so it will inherit from element's color*/
 	border: 1px solid;
	background: transparent;
}

[type="range"] {
	-webkit-appearance: none;
	min-width: 200px;
}

/* Borders color work for these inputs, 
but selected state is not showing */
[type="checkbox"], [type="radio"] {
 	-webkit-appearance: none;
 	width: 20px;
 	height: 20px;
}
 
[type="radio"] {
	border-radius: 50%;
}

dabblet.html

<input type="color" value="#ff00ff" onchange="document.body.style.color = this.value" ></input> <-- change me<br><br>
<input type="text" value="Text Input" ></input> <input type="date" ></input>
<select><option>Item 1</option></select> <button>Button</button>
<input type="checkbox"></input><input type="radio"></input>
<input type="range"></input>
<p>Some content</p>

dabblet.js

// alert('Hello world!');

settings.json

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