TPH SOP Buttons Demo

by Cory Hughes

HTML

<div class="frame set-Administrative">
	<h1>ADMINISTRATIVE</h1>
	
    <form action="">
        <ul class="bit-025">		
            <li><input type="checkbox" id="DigitalColour" name="DigitalColour" value="DigitalColour"><label for="DigitalColour"> Digital Colour</label></li>
			<li><input type="checkbox" id="DigitalBW" name="DigitalBW" value="DigitalBW"><label for="DigitalBW"> Digital BW</label></li>
			<li><input type="checkbox" id="LargeFMTPosters" name="LargeFMTPosters" value="LargeFMTPosters"><label for="LargeFMTPosters"> Large FMT Posters</label></li>
			<li><input type="checkbox" id="Offset" name="Offset" value="Offset"><label for="Offset"> Offset</label></li>
			<li><input type="checkbox" id="AniColour" name="AniColour" value="AniColour"><label for="AniColour"> AniColour</label></li>
			<li><input type="checkbox" id="Scanning" name="Scanning" value="Scanning"><label for="Scanning"> Scanning</label></li>
			<li><input type="checkbox" id="3DPrinting" name="3DPrinting" value="3DPrinting"><label for="3DPrinting"> 3D Printing</label></li>
			<li><input type="checkbox" id="Zund" name="Zund" value="Zund"><label for="Zund"> Zund</label></li>
        </ul>
		
        <ul class="bit-025">
            <li><input type="checkbox" id="Design" name="Design" value="Design"><label for="Design"> Design</label></li>
			<li><input type="checkbox" id="Prototype" name="Prototype" value="Prototype"><label for="Prototype"> Prototype</label></li>
			<li><input type="checkbox" id="CustomLabels" name="CustomLabels" value="CustomLabels"><label for="CustomLabels"> Custom Labels</label></li>
			<li><input type="checkbox" id="DigitalMedia" name="DigitalMedia" value="DigitalMedia"><label for="DigitalMedia"> Digital Media</label></li>
			<li><input type="checkbox" id="HardcoverBooks" name="HardcoverBooks" value="HardcoverBooks"><label for="HardcoverBooks"> Hardcover Books</label></li>
			<li><input type="checkbox" id="SoftcoverBooks" name="SoftcoverBooks" value="SoftcoverBooks"><label...

CSS

*{margin:0;padding:0;box-sizing:border-box}
.frame{margin:0 auto;max-width:100%}
.frame:after{content:"";display:table;clear:both}
[class*=bit-]{float:left;padding:.3em}
/* .bit-1{width:100%}.bit-2{width:50%}.bit-3{width:33.33333%}.bit-4{width:25%}.bit-5{width:20%}.bit-6{width:16.66667%}.bit-7{width:14.28571%}.bit-8{width:12.5%}.bit-9{width:11.11111%}.bit-10{width:10%}.bit-11{width:9.09091%}.bit-12{width:8.33333%}.bit-25{width:25%}.bit-40{width:40%}.bit-60{width:60%}.bit-75{width:75%}@media (max-width:30em){.bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-4,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%}}@media (min-width:30em) and (max-width:50em){.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%}.bit-1,.bit-11,.bit-2,.bit-3,.bit-5,.bit-7,.bit-9{width:100%}}@media (min-width:50em) and (max-width:68.75em){.bit-2,.bit-7{width:100%}.bit-10,.bit-12,.bit-4,.bit-8{width:50%}} */

body {
	background-color: #fff;
	padding: 10px;
	font-family: Arial;	
}
h1 {
	margin-bottom:15px;
	font-weight: bold;		
}

.frame {
	margin-bottom: 25px;	
}

img {max-width:100%;}

.bit-025 {
    width: 25%;	
	margin: 0;
	padding: 0;	
}
ul {
	list-type: none;	
}
label {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
	padding: 10px;		
	display: block;	
	margin: 0;
}

.bit-025:nth-child(odd) > li:nth-child(2n+1) {
	background: #f2f2f2;	
}
.bit-025:nth-child(even) > li:nth-child(2n+2) {
	background: #f2f2f2;
}


/* CHECKBOXES */
input[type="checkbox"] {
	/* display: none; */	
    position: absolute;	
    left: -9999px;
}

input:checked + label::before {
    background-color: green;	
	color: #fff;
	font-weight: bold;	
}
input:checked + label {
	font-weight: bold;
}
input + label > select {
	display: none;
	float: right;	
	
}
input:checked + label > select {
	display: block;
}

label {
  display: block;
  position: relative;
  padding-left: 50px; 
  /*...