Checkbox ios 7-8 style

Developer
Sergey
Size
2,927 Kb
Views
22,264
  1. Checkbox ios 7-8 style Previews
  2. Checkbox ios 7-8 style HTML Codes
  3. Checkbox ios 7-8 style CSS Codes

How do I make an checkbox ios 7-8 style?

Used only input and label. What is a checkbox ios 7-8 style? How do you make a checkbox ios 7-8 style? This script and codes were developed by Sergey on 14 November 2022, Monday.

Checkbox ios 7-8 style Previews
IQ Test

Checkbox ios 7-8 style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>checkbox ios 7-8 style</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div class="wrapper"> <p>IOS mode</p> <input id="checkbox" type="checkbox"/> <label class="control" for="checkbox"></label> </div>
</body>
</body>
</html>

Checkbox ios 7-8 style - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300");
.wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding: 11.11111111111111px; width: 400px; height: 55.55555555555556px; text-align: right; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
}
p { display: inline-block; line-height: 55.55555555555556px; font-family: "Open Sans"; font-weight: 300; font-size: 55.55555555555556px; vertical-align: top; margin: 0 11.11111111111111px 0 0;
}
.control { display: inline-block; position: relative; box-sizing: border-box; width: 100px; height: 55.55555555555556px; margin: 0; border-radius: 55.55555555555556px; transition: all 0.2s; cursor: pointer;
}
.control::before { content: ''; display: block; position: relative; box-sizing: border-box; top: -1.333333333333333px; left: -1.333333333333333px; height: 58.22222222222222px; width: 102.66666666666667px; background: #efefef; border: 0 solid #67cd2c; border-radius: 55.55555555555556px; box-shadow: inset 0 0 4px rgba(0,0,0,0.2); transition: all 0.3s;
}
.control::after { content: ''; display: block; position: absolute; left: 0; top: 0; box-sizing: border-box; height: 100%; width: 55.55555555555556px; background: #fff; border: 1.333333333333333px solid #f2f2f2; border-radius: 55.55555555555556px; box-shadow: 0 0 2.666666666666667px rgba(0,0,0,0.5); transition: all 0.2s ease-out;
}
input { display: none;
}
input:checked + .control { background: #67cd2c;
}
input:checked + .control::before { border-width: 29.61111111111111px;
}
input:checked + .control::after { left: 44.44444444444444px;
}
Checkbox ios 7-8 style - Script Codes
Checkbox ios 7-8 style - Script Codes
Home Page Home
Developer Sergey
Username JohnTheCat
Uploaded November 14, 2022
Rating 3
Size 2,927 Kb
Views 22,264
Do you need developer help for Checkbox ios 7-8 style?

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!

Sergey (JohnTheCat) Script Codes
Name
Checkbox sony xperia style
BMTH logo mask test
Particles attraction
A Pen by Sergey
Hoi hoi
Switch from Google Material Design
Create amazing love letters 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!