input[type="radio"] { display: none; } input[type="radio"]:checked+label span { transform: scale(1.25); } input[type="radio"]:checked+label .red { border: 2px solid #711313; } input[type="radio"]:checked+label .orange { border: 2px solid #873a08; } input[type="radio"]:checked+label .yellow { border: 2px solid #816102; } input[type="radio"]:checked+label .olive { border: 2px solid #505a0b; } input[type="radio"]:checked+label .green { border: 2px solid #0e4e1d; } input[type="radio"]:checked+label .teal { border: 2px solid #003633; } input[type="radio"]:checked+label .blue { border: 2px solid #103f62; } input[type="radio"]:checked+label .violet { border: 2px solid #321a64; } input[type="radio"]:checked+label .purple { border: 2px solid #501962; } input[type="radio"]:checked+label .pink { border: 2px solid #851554; } .border-add { border: 2px solid #321a64; } #createEventForm .form-group { margin: 0px; } #createEventForm label { margin-top: -20px; } #color-box label { display: inline-block; width: 20px; height: 20px; margin-right: 10px; cursor: pointer; } #color-box label:hover span { transform: scale(1.25); } #color-box label span { display: block; width: 100%; height: 100%; transition: transform .2s ease-in-out; } #color-box label span.red { background: red; } #color-box label span.orange { background: orange; } #color-box label span.yellow { background: yellow; } #color-box label span.olive { background: olive; } #color-box label span.green { background: green; } #color-box label span.teal { background: teal; } #color-box label span.blue { background: blue; } #color-box label span.violet { background: violet; } #color-box label span.purple { background: purple; } #color-box label span.pink { background: pink; }