Tree Triangle (Checkbox)

by mgoetzke

HTML

<input id='cb1' type="checkbox" />
<label for='cb1'></label>

CSS

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"]  + label  {
    display:inline-block;
    width:16px;
    height:16px;
    padding: 6px;
    opacity:0.5;
    background-color:transparent;
-moz-transition: transform 0.2s ease;
-webkit-transition: transform 0.2s ease;
-o-transition: transform 0.2s ease;
transition: transform 0.2s ease;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KCgo8IS0tIFRoZSBpY29uIGNhbiBiZSB1c2VkIGZyZWVseSBpbiBib3RoIHBlcnNvbmFsIGFuZCBjb21tZXJjaWFsIHByb2plY3RzIHdpdGggbm8gYXR0cmlidXRpb24gcmVxdWlyZWQsIGJ1dCBhbHdheXMgYXBwcmVjaWF0ZWQuIApZb3UgbWF5IE5PVCBzdWItbGljZW5zZSwgcmVzZWxsLCByZW50LCByZWRpc3RyaWJ1dGUgb3Igb3RoZXJ3aXNlIHRyYW5zZmVyIHRoZSBpY29uIHdpdGhvdXQgZXhwcmVzcyB3cml0dGVuIHBlcm1pc3Npb24gZnJvbSBpY29ubW9uc3RyLmNvbSAtLT4KCgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgoKPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGlkPSJhcnJvdy0zOC1pY29uIiBkPSJNMTY1LjAwMSwxMzUuODEybDE3My44NjEsMTIwLjE4OEwxNjUuMDAxLDM3Ni4xODhWMTM1LjgxMiBNMTIwLjAwMSw1MHY0MTJsMjk3Ljk5OC0yMDUuOTk5TDEyMC4wMDEsNTAKCglMMTIwLjAwMSw1MHoiLz4KCjwvc3ZnPgoK");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

input[type="checkbox"]:checked  + label  {
background-image:...