Skip to content

Instantly share code, notes, and snippets.

Created July 11, 2014 08:47
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Color inheritance experiment
* 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%;
<input type="color" value="#ff00ff" onchange=" = 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>
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment