Art like drawing

<div class="wrap"> <div class="block"> <span>cheap</span> <input data-index="0" id="cheap" type="checkbox" /> <label for="cheap"></label> </div> <div class="block"> <span>fast</span> <input data-index="1" id="fast" type="checkbox" /> <label for="fast"></label> </div> <div class="block"> <span>good</span> <input data-index="2" id="quality" type="checkbox" /> <label for="quality"></label> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700&subset=cyrillic'); input{ display:none; } .block{ width:200px; position:relative; clear:both; margin:0 0 25px; float: left; } span{ text-transform:uppercase; font-family:'Roboto Condensed', sans-serif; font-weight:bold; letter-spacing:1px; font-size:15px; float:right; width:85px; margin:16px 0 0; } .wrap{ width:200px; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:30px 30px 5px; } label{ width:100px; height:50px; box-sizing:border-box; border:3px solid; float:left; border-radius:100px; position:relative; cursor:pointer; transition:.3s ease; } input[type=checkbox]:checked + label{ background:#55e868; } input[type=checkbox]:checked + label:before{ left:50px; } label:before{ transition:.3s ease; content:''; width:40px; height:40px; position:absolute; background:white; left:2px; top:2px; box-sizing:border-box; border:3px solid; color:black; border-radius:100px; }

$('input[type=checkbox]').change(function(){ counter = 0; clicked = $(this).data('index'); $('input[type=checkbox]').each(function(){ if($(this)[0].checked){ counter++; } }); if(counter==3){ toDisable = clicked; while(toDisable==clicked){ toDisable=Math.round(Math.random()*2); } $("input:eq("+toDisable+")")[0].checked = false; } });

This is an example of a checkbox switcher designed using HTML, JavaScript, and CSS. JavaScript has been used to make sure only two checkboxes of the three are selected at a time. The boxes are given the type ‘checkbox' and named as Cheap, Fast and Good. The font type is imported from Google with the URL and the label is set with the styles of font-family as 'Roboto Condensed', sans-serif, font-size as 15px, cursor as pointer to display the hand cursor, display as none to hide the elements, text-transform as uppercase to automatically convert the text to uppercase and margin as 0 0 25px. In an unchecked event, the styles will be as border-radius: 100px, width and height: 40px, position: absolute, background: white, and box-sizing: border-box, and the font color as black. After a checked event, the color of the background will change to #55e868. Source: https://codepen.io/artyom-ivanov/pen/ggQaLV

Art like drawing

Post Comment or Questions Cancel reply