Checkbox Switch

Developer
Christian Naths
Size
4,665 Kb
Views
12,144
  1. Checkbox Switch Previews
  2. Checkbox Switch HTML Codes
  3. Checkbox Switch CSS Codes
  4. Checkbox Switch JS Codes

How do I make an checkbox switch?

A simple, gummy little switch thingy. Now accelerated for touch devices! All JS can be removed though and it will still work.. What is a checkbox switch? How do you make a checkbox switch? This script and codes were developed by Christian Naths on 29 November 2022, Tuesday.

Checkbox Switch Previews
IQ Test

Checkbox Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Checkbox Switch</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel='stylesheet prefetch' href='css/npzlgo.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form action='#'> <div class='field position'> <input id='checkme' type='checkbox'> <label>Animated using position</label> </div> <hr> <div class='field transform'> <input id='checkme' type='checkbox'> <label>Animated using transform</label> </div>
</form>
<div id='output'></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Checkbox Switch - Script Codes CSS Codes

@keyframes switch-on-position 0% left: 0 right: 50% 25% left: 0 right: 37.5% 100% left: 50% right: 0
@keyframes switch-off-position 0% left: 50% right: 0 25% left: 37.5% right: 0 100% left: 0% right: 50%
@keyframes switch-on-transform 0% transform: translate(0) scaleX(1) 25% transform: translate(0) scaleX(1.33) 100% transform: translate(100%) scaleX(1)
@keyframes switch-off-transform 0% transform: translate(100%) scaleX(1) 25% transform: translate(100%) scaleX(1.33) 100% transform: translate(0) scaleX(1)
body max-width: 30em margin: 0 auto text-align: center padding: 1.5em 2em
input[type="checkbox"] position: relative display: inline-block -webkit-appearance: none -webkit-tap-highlight-color: transparent height: 2em width: 4em font-size: 2em border-radius: 1.5em background-color: $neutral-medium border-color: transparent background-clip: padding-box color: $neutral-light vertical-align: middle transition: all 0.25s linear 0.25s &::before content: "" position: absolute top: 0 left: 0 bottom: 0 right: 50% background-color: white border-radius: 100% border: 0.125em solid transparent background-clip: padding-box z-index: 2 transform-origin: right center &::after position: absolute left: 0.675em top: 0 line-height: 2 font-family: "Ionicons" content: "\f121 \f129" letter-spacing: 1em z-index: 1 &:focus color: white border-color: transparent background-color: $neutral-medium outline: none
input[type="checkbox"]:checked color: white background-color: $green border-color: transparent &::before transform-origin: left center
.field display: inline-block margin: 1.5em 0
hr border: none border-bottom: 1px solid $neutral-light
label display: block color: $neutral-medium
.field.position input[type="checkbox"]::before animation: switch-off-position 0.25s ease-out forwards
.field.position input[type="checkbox"]:checked::before animation: switch-on-position 0.25s ease-out forwards
.field.transform input[type="checkbox"]::before animation: switch-off-transform 0.25s ease-out forwards
.field.transform input[type="checkbox"]:checked::before animation: switch-on-transform 0.25s ease-out forwards

Checkbox Switch - Script Codes JS Codes

(function() { var $switch; if (Modernizr.touch) { $("#output").text("Touch device"); $switch = $("input[type='checkbox']"); $switch.on("click", function(event) { event.preventDefault(); return event.stopPropagation(); }); $switch.on("touchend", function(event) { var $this; event.preventDefault(); event.stopPropagation(); $this = $(this); if ($this.is(":checked")) { return $this.prop("checked", false); } else { return $this.prop("checked", true); } }); }
}).call(this);
Checkbox Switch - Script Codes
Checkbox Switch - Script Codes
Home Page Home
Developer Christian Naths
Username christiannaths
Uploaded November 29, 2022
Rating 4.5
Size 4,665 Kb
Views 12,144
Do you need developer help for Checkbox Switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Christian Naths (christiannaths) Script Codes
Name
Off-Canvas Responsive Layout
Responsive Admin Panel 2
Responsive App Layout
MicroHero Logo Animation
Responsive Admin Panel
Upcoming Event Stream
CSS-Only Inputs
Next Game Widget
Activity Timeline
Animated Chart
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!