Advanced Checkbox Hack

Developer
Tim Pietrusky
Size
3,416 Kb
Views
76,912
  1. Advanced Checkbox Hack Previews
  2. Advanced Checkbox Hack HTML Codes
  3. Advanced Checkbox Hack CSS Codes
  4. Advanced Checkbox Hack JS Codes

How do I make an advanced checkbox hack?

This works for both iOS and Android! You can use almost the default checkbox-hack syntax and just need to add two things:. What is a advanced checkbox hack? How do you make a advanced checkbox hack? This script and codes were developed by Tim Pietrusky on 20 June 2022, Monday.

Advanced Checkbox Hack Previews
IQ Test

Advanced Checkbox Hack - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Advanced Checkbox Hack</title> <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! */ /* Advanced Checkbox Hack */
/* * pseudo-class + general/adjacent sibling doesn't work * on Android <= 4.1.2 so we need a hack: * * A useless animation :D */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
input[type=checkbox] { position: absolute; top: -9999px; left: -9999px;
}
label { cursor: pointer; user-select: none;
}
/* styling */
body { margin:.5em; font: 1em sans-serif;
}
h1 { position:fixed; z-index:-1; top:.25em; left:8em; font-size:1.3em; width:14em; color:#666;
}
label { display:inline-block; background:#ccc; margin:0 0 .5em 0; padding:1em 2em;
}
div { background: hsla(24, 80%, 50%, .8); width: 26em; height: 10em; line-height: 100px; color: white; text-align: center;
}
/* checked */
input[type=checkbox]:checked ~ div { background: hsla(120, 80%, 50%, .8);
}
input[type=checkbox]:checked ~ div span { background: hsla(310, 60%, 50%, .8); padding:1em;
}
input[type=checkbox]:checked ~ label { background: hsla(220, 80%, 50%, .8);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Advanced Checkbox Hack</h1>
<input type="checkbox" id="button" />
<label for="button" onclick>click / touch</label>
<div> Change my color! <br> <span>even mine :D</span>
</div> <script src="js/index.js"></script>
</body>
</html>

Advanced Checkbox Hack - Script Codes CSS Codes

/* Advanced Checkbox Hack */
/* * pseudo-class + general/adjacent sibling doesn't work * on Android <= 4.1.2 so we need a hack: * * A useless animation :D */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
input[type=checkbox] { position: absolute; top: -9999px; left: -9999px;
}
label { cursor: pointer; user-select: none;
}
/* styling */
body { margin:.5em; font: 1em sans-serif;
}
h1 { position:fixed; z-index:-1; top:.25em; left:8em; font-size:1.3em; width:14em; color:#666;
}
label { display:inline-block; background:#ccc; margin:0 0 .5em 0; padding:1em 2em;
}
div { background: hsla(24, 80%, 50%, .8); width: 26em; height: 10em; line-height: 100px; color: white; text-align: center;
}
/* checked */
input[type=checkbox]:checked ~ div { background: hsla(120, 80%, 50%, .8);
}
input[type=checkbox]:checked ~ div span { background: hsla(310, 60%, 50%, .8); padding:1em;
}
input[type=checkbox]:checked ~ label { background: hsla(220, 80%, 50%, .8);
}

Advanced Checkbox Hack - Script Codes JS Codes

 /** Advanced Checkbox Hack # What? # The better Checkbox-Hack because it works for both iOS and Android. ## 1. Android <= 4.1.2 pseudo-class + general/adjacent sibling doesn't work on Android so we need a hack: body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } ## 2. iOS < 6.0 Due to a bug on iOS it's not possible to click the label to toggle the input (checkbox), so we add an empty onclick to the label: <label for="button" onclick>click / touch</label> # 2012 by Tim Pietrusky # timpietrusky.com
**/
Advanced Checkbox Hack - Script Codes
Advanced Checkbox Hack - Script Codes
Home Page Home
Developer Tim Pietrusky
Username TimPietrusky
Uploaded June 20, 2022
Rating 4
Size 3,416 Kb
Views 76,912
Do you need developer help for Advanced Checkbox Hack?

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!

Tim Pietrusky (TimPietrusky) Script Codes
Name
Playlist UI for Rodeo 004
ID Card - Skills
FlatUI Checkout concept
Off Canvas
Pinky - 1 of 111001100110110111
Star Wars opening crawl from 1977
Full Horizontal
Blurry Sweetness
Kudos Please
Pattern lab logo
Create amazing blog posts 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!