Complete first color picker

index.html

@@ -25,36 +25,52 @@
 	<div class="colorpicker container">
 	  <div class="row">
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
-	      <input type="radio" name="bg-color" value="red" id="bg-red" />
-	      <label style="background-color: red" for="bg-red"></label>
+	      <input type="radio" name="bg-color" value="red" id="bg-red" checked/>
+	      <label for="bg-red">
+		<span style="background-color: red"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="pink" id="bg-pink" />
-	      <label style="background-color: pink" for="bg-pink"></label>
+	      <label for="bg-pink">
+		<span style="background-color: pink"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="orange" id="bg-orange" />
-	      <label style="background-color: orange" for="bg-orange"></label>
+	      <label for="bg-orange">
+		<span style="background-color: orange"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="yellow" id="bg-yellow" />
-	      <label style="background-color: yellow" for="bg-yellow"></label>
+	      <label for="bg-yellow">
+		<span style="background-color: yellow"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="teal" id="bg-teal" />
-	      <label style="background-color: teal" for="bg-teal"></label>
+	      <label for="bg-teal">
+		<span style="background-color: teal"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="blue" id="bg-blue" />
-	      <label style="background-color: blue" for="bg-blue"></label>
+	      <label for="bg-blue">
+		<span style="background-color: blue"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="black" id="bg-black" />
-	      <label style="background-color: black" for="bg-black"></label>
+	      <label for="bg-black">
+		<span style="background-color: black"></span>
+	      </label>
 	    </div>
 	    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
 	      <input type="radio" name="bg-color" value="white" id="bg-white" />
-	      <label style="background-color: white" for="bg-white"></label>
+	      <label for="bg-white">
+		<span style="background-color: white"></span>
+	      </label>
 	    </div>
 	  </div>
 	</div>

style.css

@@ -46,21 +46,36 @@ div#inputs {
   display: none;
 }
 
+.colorpicker > div > div {
+  margin-bottom: 2em;
+}
+
 .colorpicker input[type="radio"] + label {
+  /* display: inline-block; */
+  border-radius: 50%;
+  margin: 1em;
+}
+
+.colorpicker input[type="radio"] + label > span {
   display: inline-block;
   width: 4em;
   height: 4em;
-  margin: 1em;
+  /* margin: .5em; */
   border-radius: 50%;
   cursor: pointer;
 }
 
-.colorpicker input[type="radio"][value="white"]:not(:checked) + label {
-  border: 2px solid grey
+.colorpicker input[type="radio"][value="white"] + label > span {
+  padding: 1em;
+  border: 2px solid grey;
+}
+
+.colorpicker input[type="radio"]  + label {
+  border: 5px solid #dde5f1;
 }
 
-.colorpicker input[type="radio"]:checked + label {
-  border: 5px solid grey;
+.colorpicker input[type="radio"]:not(:checked)  + label {
+  border: 5px solid transparent;
 }
 
 div[id^="step"] {