Custom checkbox and radio with menu
How do I make an custom checkbox and radio with menu?
What is a custom checkbox and radio with menu? How do you make a custom checkbox and radio with menu? This script and codes were developed by Parth Viroja on 03 September 2022, Saturday.
Custom checkbox and radio with menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>custom checkbox and radio with menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="dropdown"> <li class="title">Category</li> <li> <label>Checkbox 1 <input type="checkbox" name="category[]" value="checkbox 1" checked/><span></span></label> </li> <li> <label>Checkbox 2 <input type="checkbox" name="category[]" value="checkbox 2" /><span></span></label> </li> <li> <label>Checkbox 3 <input type="checkbox" name="category[]" value="checkbox 3" /><span></span></label> </li> <li> <label>Checkbox 4 <input type="checkbox" name="category[]" value="checkbox 4" /><span></span></label> </li> <li> <label>Checkbox 5 <input type="checkbox" name="category[]" value="checkbox 5" /><span></span></label> </li> <li> <label>Checkbox 6 <input type="checkbox" name="category[]" value="checkbox 6" /><span></span></label> </li> <li class="divider"></li> <li class="title">Product Filter</li> <li> <label>Radio 1 <input type="radio" name="filter" value="radio 1" checked="" /><span></span></label> </li> <li> <label>Radio 2 <input type="radio" name="filter" value="radio 2" /><span></span></label> </li> <li class="note"><strong>Set your preferred language.</strong> This will be your default for searching and browsing, but we'll still show you results for other languages.</li>
</ul>
</body>
</html>
Custom checkbox and radio with menu - Script Codes CSS Codes
*,
*:after,
*:before { padding: 0; margin: 0; text-decoration: none; list-style-type: none; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html,
body { position: relative; width: 100%; height: 100%;
}
body { font-family: Calibri, Arial, sans-serif; letter-spacing: 1px; overflow: hidden; overflow-y: auto; background-color: #efefef; letter-spacing: 1px; padding: 20px;
}
.dropdown { position: relative; display: block; margin: 0 auto; width: 220px; background: #fff; color: #666; border-radius: 4px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); overflow: hidden;
}
.dropdown li:hover:not(.title) { background-color: #efefef;
}
.dropdown strong { color: #3E3E3E; font-weight: 400; display: block; margin-bottom: 0.75em;
}
.dropdown li.title { font-size: 16px; padding: 10px 12px; color: #81c483;
}
.dropdown li.divider { background-color: #cfcfcf; height: 1px;
}
.dropdown li.note { background: #f6f6f6; border-top: 1px solid #cfcfcf; color: #aaa; font-size: 12px; padding: 12px;
}
.dropdown li label { display: block; line-height: 36px; padding-left: 36px;
}
.dropdown li label > span { position: absolute; display: inline-block; left: 12px; margin-top: 12px; width: 12px; height: 12px; border: 1px solid #cfcfcf; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.dropdown li label input { display: none;
}
.dropdown li label input[type=checkbox] ~ span { border-radius: 2px;
}
.dropdown li label input[type=radio]~ span { border-radius: 100%;
}
.dropdown li label input[type=checkbox]:checked ~ span { background-color: #81c483; border: 1px solid #999;
}
.dropdown li label input[type=radio]:checked ~ span { background-color: #81c483; border: 1px solid #999;
}
Developer | Parth Viroja |
Username | parthviroja |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 2,288 Kb |
Views | 32,384 |
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 |
Filter, sort grid item | 2,592 Kb |
Form Wizard | 2,857 Kb |
Responsive Card Design | 2,696 Kb |
Slide up down | 1,833 Kb |
Jquery Tree with checkbox | 6,287 Kb |
Rotate Circle Pure Javascript | 2,896 Kb |
Ubuntu Terminal | 2,603 Kb |
Tag list | 2,358 Kb |
Responsive grid with filter, sort and layout | 2,993 Kb |
Card border collspan | 1,781 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 |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
Filtering with shuffle.js | Deyand | 2,712 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!