color sliced features and match checkboxes

web/kiri/index.css

@@ -74,6 +74,7 @@ input {
     padding-bottom: 0;
     margin-top: 1px;
     margin-bottom: 1px;
+    position: relative;
 }
 input:focus {
     background-color: #fec;
@@ -90,6 +91,30 @@ input[type="range"] {
 input[type=range]::-moz-focus-outer {
     border: 0;
 }
+input[type="checkbox"] + .color {
+    z-index: 10000;
+    width: 15px;
+    height: 15px;
+    border: 1px solid rgba(0,0,0,0.1);
+    border-radius: 3px;
+    display: inline-block;
+    pointer-events: none;
+    margin: 2px;
+}
+input[type="checkbox"]:not(:checked) + .color {
+    border: 1px solid blue;
+    background-color: rgba(255,255,255,0.5) !important;
+}
+input[type="checkbox"].color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}
 select, textarea, button, input, a {
     outline: none;
 }