Flat UI - Checkbox FIX
How do I make an flat ui - checkbox fix?
Flat UI checkbox bug fixed now! Fork based on Flat UI - Custom checkboxes by @geoffrey_crofte. What is a flat ui - checkbox fix? How do you make a flat ui - checkbox fix? This script and codes were developed by Arsen Zbidniakov on 13 October 2022, Thursday.
Flat UI - Checkbox FIX - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat UI - Checkbox FIX</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1><a href="https://designmodo.github.io/Flat-UI/">Flat UI</a> - Checkbox FIX</h1>
<h2>CSS only</h2>
<p>Do you like?</p>
<form action="#">
<p><input type="checkbox" id="test1" /><label for="test1"><span class="ui"></span>Paris</label></p>
<p><input type="checkbox" id="test2" /><label for="test2"><span class="ui"></span>London</label></p>
<p><input type="checkbox" id="test3" /><label for="test3"><span class="ui"></span>New York</label></p>
</form>
<br /><p class="txtcenter copy">a fork based on <a href="https://codepen.io/CreativeJuiz/pen/zqKtp">Flat UI - Custom checkboxes</a><br />by <a href="https://twitter.com/geoffrey_crofte">@geoffrey_crofte</a></p> <script src="js/index.js"></script>
</body>
</html>
Flat UI - Checkbox FIX - Script Codes CSS Codes
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked { position: absolute; left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label { position: relative; padding-left: 95px; cursor: pointer;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after { content: ''; position: absolute;
}
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before { left: 0; top: 0; width: 80px; height: 30px; background: #DDDDDD; border-radius: 6px; transition: background-color .2s;
}
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after { width: 30px; height: 30px; transition: all .2s; border-radius: 6px 0 0 6px; background: #7F8C9A; top: 0; left: 0;
}
/* on checked */
[type="checkbox"]:checked + label:before { background:#34495E;
}
[type="checkbox"]:checked + label:after { background: #39D2B4; top: 0; left: 51px; border-radius: 0 6px 6px 0;
}
[type="checkbox"]:checked + label .ui,
[type="checkbox"]:not(:checked) + label .ui:before,
[type="checkbox"]:checked + label .ui:after { position: absolute; left: 6px; width: 65px; border-radius: 15px; font-size: 14px; font-weight: bold; line-height: 22px; transition: all .2s;
}
[type="checkbox"]:not(:checked) + label .ui:before { font-family: 'FontAwesome'; content: "\f00d"; left: 46px; margin-top: 3px;
}
[type="checkbox"]:checked + label .ui:after { font-family: 'FontAwesome'; content: "\f00c"; color: #39D2B4; margin-top: 3px; left: 12px;
}
[type="checkbox"]:focus + label:before { border: 0; outline: 0; box-sizing: border-box;
}
/* Basics */
body { font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif; color: #7F8C9A; background: #FCFDFD;
}
h1, h2 { margin-bottom: 5px; font-weight: normal; text-align: center; color:#aaa;
}
h2 { margin: 5px 0 2em; color: #1ABC9C;
}
form { width: 80px; margin: 0 auto;
}
h2 + P { text-align: center;
}
.txtcenter { margin-top: 4em; font-size: .9em; text-align: center; color: #aaa;
}
.copy { margin-top: 2em;
}
.copy a { text-decoration: none; color: #1ABC9C;
}
h1 > a { color: #1ABC9C; text-decoration: none;
}
Flat UI - Checkbox FIX - Script Codes JS Codes
/*
TIP:
No JS. Works on KEYBOARD navigation (tab + spacebar).
*/
/*
19/01/2016
UPDATE:
- icon font fix;
- focus 1px border fix.
*/
Developer | Arsen Zbidniakov |
Username | ARS |
Uploaded | October 13, 2022 |
Rating | 4 |
Size | 2,663 Kb |
Views | 16,192 |
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!
Name | Size |
Understanding CSS clip | 8,794 Kb |
Split Showcase | 3,789 Kb |
HTML5 Audio Player | 5,934 Kb |
Infinity Morph | 2,974 Kb |
Apple Devices Mockup | 2,484 Kb |
Long Shadows for Font Awesome | 3,424 Kb |
GSAP Text Animation | 2,777 Kb |
IPhone lockscreen | 3,923 Kb |
Animated Gradient Ghost Button Concept | 3,590 Kb |
Shattering Text Animation | 5,244 Kb |
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!
Name | Username | Size |
LeMandinque | Aadesida | 9,046 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Border-radius animation | Yukulele | 2,480 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!