Skip to content

Instantly share code, notes, and snippets.

@Fobiya

Fobiya/dabblet.css

Forked from voidove/dabblet.css
Created November 8, 2016 12:55
Show Gist options
  • Save Fobiya/6a425c5ba5fdecda4bb770d59238985d to your computer and use it in GitHub Desktop.
Save Fobiya/6a425c5ba5fdecda4bb770d59238985d to your computer and use it in GitHub Desktop.
Download ZIP
checkbox
Raw
dabblet.css
/**
* checkbox
*/
input[type=checkbox] {
opacity: 0;
}
input[type=checkbox]+label {
position: relative;
margin-left: 20px;
}
input[type=checkbox]+label::before,
input[type=checkbox]+label::after {
content: "";
position: absolute;
display: block;
width: 20px;
height: 20px;
border-radius: 2px;
top: 0;
}
input[type=checkbox]+label::before {
background-color: #fff;
border: 1px solid #e5e5e5;
}
input[type=checkbox]:checked+label::before {
background-color: #39e379;
border-color: #1dcc5d;
}
input[type=checkbox]:checked:focus+label::before {
//outline: 2px solid rgba(197, 111, 213, 0.7);
//outline-offset: 3px;
}
input[type=checkbox]:checked:focus+label::after {
border: 2px solid rgba(197, 111, 213, 0.7);
}
input[type=checkbox]+label::after {
opacity: 0.5;
//width: 30px;
//height: 30px;
//border-radius: 5px;
//position: absolute;
//content: "";
//box-sizing: border-box;
background-position: 50%;
background-repeat: no-repeat;
background-size: 1em;
//border: 2px solid #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAhCAYAAACvBDmYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYdJREFUeNrUl9Ftg0AMhiESz80GzQZhg2YENigblGzACGzQdANGuBGSDegG12ceqC2ZCKWAzd1RHEt+4jg+zv7NTxQpi7ZtL5BXyH2kNQCuhOwodcICVD6A7NNCpng9VgKJMAbyZeTyD+QpVgCJ5W0mIO+wOwWQhoHEKDQovGOy0KTwqbxoVPgsZKxM4X3cUOlJkthNQIUK/wOJsVOmcJyZ+SPkv4JCYM8dGUg8yeuW4qkE4smeQeG5iyKDKlwAWbkO4DIQ5IHcT7iBPvLm6AUPPgqnPeYgjcvGZsILZo6gNQO53BTjR5/roSWbChTeODl3QR/1J5AGULh1FSwOfCzvN7MOB7WZGyME8Mns4zfQqflrwcl25CH3I2K0QWelZ78O+yxdoHBvyHiihDXkq+D+M7XO28yaLyh3eNCB08Evxrvn/kEgWT9KJasEP19iX7kK6KAVOIu2KuQih0/m4UOwFH1lCpDNlpYtY8aQDe3AfF2RUWl+hf/leaQ1AO5E5S7XftavAAMAmYW9bJ4vUiwAAAAASUVORK5CYII=);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="checkbox-wrap">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">checkbox</label>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment