
<!-- https://codepen.io/Idered/pen/jbrzro --> <style> .c-color-swatch {display: table;width: 100%;table-layout: fixed;max-width: 250px;} .c-color-swatch__item {display: table-cell;height: 16px;line-height: 16px;text-align: center;user-select: none;position: relative;transition: transform 0.25s;} .c-color-swatch__item:hover {z-index: 1;transform: scale(1.5);} .c-color-swatch [type=checkbox]:checked + label:after {content: "";font-size: 9px;vertical-align: top;color: #fff;font-family: FontAwesome;} </style> <div class="c-color-swatch"> <input type="checkbox" name="colors[]" id="color-F9ED69" hidden/> <label class="c-color-swatch__item" for="color-F9ED69" style="background: #F9ED69"></label> <input type="checkbox" name="colors[]" value="F08A5D" id="color-F08A5D" hidden/> <label class="c-color-swatch__item" for="color-F08A5D" style="background: #F08A5D"></label> <input type="checkbox" name="colors[]" value="B83B5E" id="color-B83B5E" hidden checked/> <label class="c-color-swatch__item" for="color-B83B5E" style="background: #B83B5E"></label> <input type="checkbox" name="colors[]" value="6A2C70" id="color-6A2C70" hidden/> <label class="c-color-swatch__item" for="color-6A2C70" style="background: #6A2C70"></label> <input type="checkbox" name="colors[]" value="2B3964" id="color-2B3964" hidden/> <label class="c-color-swatch__item" for="color-2B3964" style="background: #2B3964"></label> <input type="checkbox" name="colors[]" value="3482AA" id="color-3482AA" hidden/> <label class="c-color-swatch__item" for="color-3482AA" style="background: #3482AA"></label> <input type="checkbox" name="colors[]" value="6DB3B5" id="color-6DB3B5" hidden/> <label class="c-color-swatch__item" for="color-6DB3B5" style="background: #6DB3B5"></label> <input type="checkbox" name="colors[]" value="477D7F" id="color-477D7F" hidden/> <label class="c-color-swatch__item" for="color-477D7F" style="background: #477D7F"></label> <input type="checkbox" name="colors[]" value="1F5357" id="color-1F5357" hidden/> <label class="c-color-swatch__item" for="color-1F5357" style="background: #1F5357"></label> <input type="checkbox" name="colors[]" value="64BD97" id="color-64BD97" hidden/> <label class="c-color-swatch__item" for="color-64BD97" style="background: #64BD97"></label> </div>
/* traditional */ .element { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Modern with flexbox */ .element-parent { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; width:100%; padding:80px 0; text-align: center; }
Loading...
No more items to load