Multi Color Selectors and adding custom colors

Color Selector, user be able to select multiple colors, as well as add their own custom colors. Developed using CSS, HTML and JavaScript. Demo and Download available.

Demo Download

Author Jack Harner
Hits
Created SEPTEMBER 14, 2018
License Open
Compatible browsers Chrome, Firefox, Safari

HTML Snippet

<h1>Color Selector</h1><fieldset class="color-checks">
		<input type="checkbox" name="color[]" id="color--red" value="red">

	<label style="background:rgb(244,67,54);" for="color--red">
	
	</label>
	
		<input type="checkbox" name="color[]"id="color--blue" value="blue">
	<label style="background:rgb(33,150,243);" for="color--blue"></label>
	
	<input type="checkbox" name="color[]"id="color--green" value="green">
	<label style="background:rgb(76,175,80);" for="color--green"></label>
	
	
		<input type="color" name="color-add"id="color__add">
	<label style="" for="color__add"></label>
	
	
	
	
</fieldset>

CSS Code

body {
	background: #333;
	display:flex;
	flex-direction:column;
	font-family:"Roboto";
	align-items:center;
	justify-content:center;
	height:100vh;
}

h1{text-align:center; margin:1em auto; font-size:2em;
font-weight:900; color:#fff;}

label {
	height: 10vmin;
	width: 10vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	margin:1em;
}

.color-checks {
	width: 50%;
	max-width:500px;
	margin: 2em auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap:wrap;
	

	input[type="checkbox"] {
		position: absolute;
		left: -9999vw;

		& + label {
		}

		&:checked + label {
			box-shadow: 0 0 0 2px #fff, 0 2px 5px transparentize(#000, 0.4);
			animation: rotate 1.5s;
			&:after {
				content: "âܔ";
				font-size: 5em;
				color: #fff;
			}
		}
	}
	
	
	#color__add{
		
		position: absolute;
		left: -9999vw;
		
		& + label{
			
			border:2px dashed #aaa;
			cursor:pointer;
			
			&:after{
				content: '+';
								font-size: 5em;
				color: #aaa;
			}
		} 
	}
}
.twitch{
	animation: rotate 1.5s;
}

@keyframes rotate{
	
	0%{
		transform:rotate(0deg);
	}
		25%{
		transform:rotate(20deg);
	}
		50%{
		transform:rotate(-12deg);
	}
		75%{
		transform:rotate(6deg);
	}
			100%{
		transform:rotate(0deg);
	}
	
}

JavaScript Snippet

jackHarnerSig();


$("#color__add").change(function(){ 
	var newColor = escape($(this).val().replace("#",""));
	var newInput = '<input type="checkbox" name="color[]"id="color--custom--' + newColor +'" value="' + newColor +'" checked><label style="background:#' + newColor +';" for="color--custom--' + newColor +'"></label>';
	
	if(! $("input[value='"+newColor+"']").length){
		$(this).before(newInput);	
		// $("input[value='"+newColor+"'] + label").addClass("twitch");
		
	}
	else {
		// $("input[value='"+newColor+"'] + label").addClass("twitch");
	}
	
	
})

Preview

Multi Color Selectors and adding custom colors preview

Advertisement

Google Matched Content...