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 |
Animated Gradient Ghost Button Concept | 3,590 Kb |
Shattering Text Animation | 5,244 Kb |
Flat UI - Checkbox FIX | 2,663 Kb |
Page Transition Loader | 7,268 Kb |
ELEKS Digital Production | 9,176 Kb |
Infinity Morph | 2,974 Kb |
Pastel Loader | 3,365 Kb |
Long Shadows for Font Awesome | 3,424 Kb |
IPhone lockscreen | 3,923 Kb |
Timer | 2,845 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 |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Calculator | Rzencoder | 4,572 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Flip test | Madhes | 1,635 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Twitch TV | Natester13 | 4,488 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!