IOS style checkbox concept

Developer
Aurer
Size
2,656 Kb
Views
54,648
  1. IOS style checkbox concept Previews
  2. IOS style checkbox concept HTML Codes
  3. IOS style checkbox concept CSS Codes

How do I make an ios style checkbox concept?

Styling checkbox inputs in a similar style to the IOS toggle switches.. What is a ios style checkbox concept? How do you make a ios style checkbox concept? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

IOS style checkbox concept Previews
IQ Test

IOS style checkbox concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IOS style checkbox concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 1em;
}
input[type=checkbox] { appearance: none; width: 40px; height: 22px; background: #eee; border-radius: 10px; position: relative; top: -2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background .2s .1s;
}
input[type=checkbox]:after { content: ''; height: 18px; width: 18px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; transition: left .2s;
}
input[type=checkbox]:checked { background: #76F355;
}
input[type=checkbox]:checked:after { left: 20px;
}
label { width: 6em; display: block; float: left; font-weight: bold;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>IOS style checkbox demo</h1>
<p> <label for="i1">One:</label> <input id="i1" type="checkbox" />
</p>
<p> <label for="i2">Two:</label> <input id="i2" type="checkbox" />
</p>
<p> <label for="i3">Three:</label> <input id="i3" type="checkbox" />
</p>
</body>
</html>

IOS style checkbox concept - Script Codes CSS Codes

body { padding: 1em;
}
input[type=checkbox] { appearance: none; width: 40px; height: 22px; background: #eee; border-radius: 10px; position: relative; top: -2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background .2s .1s;
}
input[type=checkbox]:after { content: ''; height: 18px; width: 18px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; transition: left .2s;
}
input[type=checkbox]:checked { background: #76F355;
}
input[type=checkbox]:checked:after { left: 20px;
}
label { width: 6em; display: block; float: left; font-weight: bold;
}
IOS style checkbox concept - Script Codes
IOS style checkbox concept - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 3
Size 2,656 Kb
Views 54,648
Do you need developer help for IOS style checkbox concept?

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!

Aurer (aurer) Script Codes
Name
JS Gradient
Webkit CSS Scrollbars
Collapsible menu using CSS transitions
Squished forms mockup
Menu handle
Collapsing list indicator animation
ERC Search panels mockup
Laravel AutoSchema Mockup
Fixed banners and parallax backgrounds
Super Clock
Create amazing art & images 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!