Fancy Radios, Checkboxes, and Selects
How do I make an fancy radios, checkboxes, and selects?
An alternative to the usual radio buttons, checkboxes, and selects with help from the Font Awesome icon font set and the FancySelect.js.. What is a fancy radios, checkboxes, and selects? How do you make a fancy radios, checkboxes, and selects? This script and codes were developed by Paul Demers on 28 August 2022, Sunday.
Fancy Radios, Checkboxes, and Selects Previews
Fancy Radios, Checkboxes, and Selects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Radios, Checkboxes, and Selects</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <div class="intro"> <h1>Fancy Radios and Checkboxes</h1> <p>An alternative to the usual radio buttons and checkboxes using the Font Awesome icon font set.</p> </div> <hr /> <div class="assess"> <h1 class="assess__question">Which state will you be practicing in?</h1> <select class="assess__answer"> <option value="0">Select a State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PW">PALAU</option> <option value="PA">Pennsylvania</option> <option value="PR">PUERTO RICO</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </div> <div class="assess"> <h1 class="assess__question">Which of the following are key components of the assessment of patients who are possible candidates for an opioid trial?</h1> <ul class="assess__answers"> <li class="assess__answer"> <input type="checkbox" id="a1"> <label for="a1">Access to product-specific information about pharmacologic treatments</label> </li> <li class="assess__answer"> <input type="checkbox" id="a2"> <label for="a2">Confirmation of diagnosis, as it is not recommended to use opioids to treat symptoms</label> </li> <li class="assess__answer"> <input type="checkbox" id="a3"> <label for="a3">Determination of comorbidities that may impact treatment decisions</label> </li> </ul> </div> <div class="assess"> <h1 class="assess__question">Which of the following is <em>not</em> one of the possible candidates for a positive diagnosis?</h1> <ul class="assess__answers"> <li class="assess__answer"> <input type="radio" id="c1" name="c2"> <label for="c1">Access to product-specific information about pharmacologic treatments</label> </li> <li class="assess__answer"> <input type="radio" id="c2" name="c2"> <label for="c2">Confirmation of diagnosis, as it is not recommended to use opioids to treat symptoms</label> </li> <li class="assess__answer"> <input type="radio" id="c3" name="c2"> <label for="c3">Determination of comorbidities that may impact treatment decisions</label> </li> </ul> <a href="replaceMe" class="reset">Reset Answers</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/keithclark/selectivizr/master/selectivizr.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fancy Radios, Checkboxes, and Selects - Script Codes CSS Codes
@import url("http://fonts.googleapis.com/css?family=Oleo+Script");
* { box-sizing: border-box;
}
html { background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png) repeat;
}
body { color: #222;
}
.intro { text-align: center; display: block; padding-bottom: .5em; margin: 0 auto;
}
.intro h1 { font-family: 'Oleo Script'; text-shadow: white 1px 1px 0; color: #274b6a;
}
.content { width: 90%; margin: 0 auto;
}
.assess { width: 80%; max-width: 50em; color: #444; margin: 0 auto; border: 1px solid #999; padding: 1em; margin-top: 1em; border-radius: 3px;
}
.assess__question { font-weight: normal; margin-top: 0;
}
.assess__answers { list-style-type: none; padding: 0;
}
.assess__answer { display: block; position: relative;
}
.assess__answer input { position: absolute; left: -9999em;
}
.assess__answer input:checked + label { background: #3a0537;
}
.assess__answer input[type=radio]:checked + label:before, .assess__answer input[type=radio].checked + label:before { content: "\f192";
}
.assess__answer input[type=checkbox]:checked + label:before, .assess__answer input[type=checkbox].checked + label:before { content: "\f14a";
}
.assess__answer label { display: block; color: #fff; background: #800C7A; padding: 1.5em 2em 1.5em 3.25em; border-bottom: 1px solid #fff; transition: all .25s; transition-property: color, padding-left;
}
.assess__answer label:before { content: "\f10c"; font-family: FontAwesome; font-size: 1.5em; padding-left: .75em; position: absolute; top: 50%; left: 0; margin-top: -.583333333em; transition: all .25s;
}
.assess__answer label:hover { background: #51084e; cursor: pointer; padding-left: 3.4em;
}
.assess__answer input[type="checkbox"] + label:before { content: "\f096";
}
.fancy-select { position: relative; background: #800C7A; border: 1px solid #ccc; width: 100%; font-size: 1em;
}
.fancy-select.disabled { opacity: 0.5;
}
.fancy-select .trigger { cursor: pointer; padding: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; color: #fff; width: 100%; transition: all .25s; transition-property: padding-left;
}
.fancy-select .trigger:hover { padding-left: 1.75em;
}
.fancy-select .trigger:after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top-color: #fff; top: 30px; right: 20px;
}
.fancy-select .trigger.open { background: #51084e; border: 1px solid #ccc; color: #ececec; box-shadow: none;
}
.fancy-select .trigger.open:after { border-top-color: #7A8498;
}
.fancy-select ul.options { list-style: none; margin: 0; padding: 0; position: absolute; top: 40px; left: 0; visibility: hidden; opacity: 0; z-index: 50; max-height: 200px; overflow: auto; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); width: 100%;
}
.fancy-select ul.options.open { visibility: visible; top: 65px; opacity: 1;
}
.fancy-select ul.options.overflowing { top: auto; bottom: 40px;
}
.fancy-select ul.options.overflowing.open { top: auto; bottom: 65px;
}
.fancy-select ul.options li { padding: 1.5em; color: #555; cursor: pointer; white-space: nowrap; border-bottom: 1px solid #ddd; transition: all .25s; transition-property: padding-left;
}
.fancy-select ul.options li.selected { background: #666; color: #ececec;
}
.fancy-select ul.options li.hover.selected { background: #999; color: #fff;
}
.fancy-select ul.options li.hover { background: #ccc; color: #444; padding-left: 1.75em;
}Fancy Radios, Checkboxes, and Selects - Script Codes JS Codes
//https://github.com/octopuscreative/FancySelect
// Generated by CoffeeScript 1.6.3
(function() { var $; $ = window.jQuery || window.Zepto || window.$; $.fn.fancySelect = function(opts) { var isiOS, settings; settings = $.extend({ forceiOS: false }, opts); isiOS = !!navigator.userAgent.match(/iP(hone|od|ad)/i); return this.each(function() { var copyOptionsToList, disabled, options, sel, trigger, updateTriggerText, wrapper; sel = $(this); if (sel.hasClass('fancified') || sel[0].tagName !== 'SELECT') { return; } sel.addClass('fancified'); sel.css({ width: 1, height: 1, display: 'block', position: 'absolute', top: 0, left: 0, opacity: 0 }); sel.wrap('<div class="fancy-select">'); wrapper = sel.parent(); if (sel.data('class')) { wrapper.addClass(sel.data('class')); } wrapper.append('<div class="trigger">'); if (!(isiOS && !settings.forceiOS)) { wrapper.append('<ul class="options">'); } trigger = wrapper.find('.trigger'); options = wrapper.find('.options'); disabled = sel.prop('disabled'); if (disabled) { wrapper.addClass('disabled'); } updateTriggerText = function() { return trigger.text(sel.find(':selected').text()); }; sel.on('blur', function() { if (trigger.hasClass('open')) { return setTimeout(function() { return trigger.trigger('close'); }, 120); } }); trigger.on('close', function() { trigger.removeClass('open'); return options.removeClass('open'); }); trigger.on('click', function() { var offParent, parent; if (!disabled) { trigger.toggleClass('open'); if (isiOS && !settings.forceiOS) { if (trigger.hasClass('open')) { return sel.focus(); } } else { if (trigger.hasClass('open')) { parent = trigger.parent(); offParent = parent.offsetParent(); if ((parent.offset().top + parent.outerHeight() + options.outerHeight() + 20) > $(window).height()) { options.addClass('overflowing'); } else { options.removeClass('overflowing'); } } options.toggleClass('open'); if (!isiOS) { return sel.focus(); } } } }); sel.on('enable', function() { sel.prop('disabled', false); wrapper.removeClass('disabled'); disabled = false; return copyOptionsToList(); }); sel.on('disable', function() { sel.prop('disabled', true); wrapper.addClass('disabled'); return disabled = true; }); sel.on('change', function(e) { if (e.originalEvent && e.originalEvent.isTrusted) { $(trigger).removeClass('foo'); return e.stopPropagation(); } else { $(trigger).addClass('foo'); return updateTriggerText(); } }); sel.on('keydown', function(e) { var hovered, newHovered, w; w = e.which; hovered = options.find('.hover'); hovered.removeClass('hover'); if (!options.hasClass('open')) { if (w === 13 || w === 32 || w === 38 || w === 40) { e.preventDefault(); return trigger.trigger('click'); } } else { if (w === 38) { e.preventDefault(); if (hovered.length && hovered.index() > 0) { hovered.prev().addClass('hover'); } else { options.find('li:last-child').addClass('hover'); } } else if (w === 40) { e.preventDefault(); if (hovered.length && hovered.index() < options.find('li').length - 1) { hovered.next().addClass('hover'); } else { options.find('li:first-child').addClass('hover'); } } else if (w === 27) { e.preventDefault(); trigger.trigger('click'); } else if (w === 13 || w === 32) { e.preventDefault(); hovered.trigger('click'); } else if (w === 9) { if (trigger.hasClass('open')) { trigger.trigger('close'); } } newHovered = options.find('.hover'); if (newHovered.length) { options.scrollTop(0); return options.scrollTop(newHovered.position().top - 12); } } }); options.on('click', 'li', function(e) { sel.val($(this).data('value')); if (!isiOS) { sel.trigger('blur').trigger('focus'); } options.find('.selected').removeClass('selected'); $(e.currentTarget).addClass('selected'); return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus'); }); options.on('mouseenter', 'li', function() { var hovered, nowHovered; nowHovered = $(this); hovered = options.find('.hover'); hovered.removeClass('hover'); return nowHovered.addClass('hover'); }); options.on('mouseleave', 'li', function() { return options.find('.hover').removeClass('hover'); }); copyOptionsToList = function() { var selOpts; updateTriggerText(); if (isiOS && !settings.forceiOS) { return; } selOpts = sel.find('option'); return sel.find('option').each(function(i, opt) { opt = $(opt); if (opt.val() && !opt.prop('disabled')) { if (opt.prop('selected')) { return options.append("<li data-value=\"" + (opt.val()) + "\" class=\"selected\">" + (opt.text()) + "</li>"); } else { return options.append("<li data-value=\"" + (opt.val()) + "\">" + (opt.text()) + "</li>"); } } }); }; sel.on('update', function() { wrapper.find('.options').empty(); return copyOptionsToList(); }); return copyOptionsToList(); }); };
}).call(this);
$('select').fancySelect();
| Developer | Paul Demers |
| Username | demersdesigns |
| Uploaded | August 28, 2022 |
| Rating | 3 |
| Size | 6,801 Kb |
| Views | 50,600 |
Do you need developer help for Fancy Radios, Checkboxes, and Selects?
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!
Paul Demers (demersdesigns) Script Codes
| Name | Size |
| Sticky Header Fade In On Scroll | 4,057 Kb |
| CodePen Boston Layout 1 | 4,234 Kb |
| Project Timeline | 9,790 Kb |
| Populate Login with User Avatar | 3,324 Kb |
| Animated Gradient Text Backgrounds | 2,927 Kb |
| Fun with transition | 5,264 Kb |
| Air Quality Gauge | 5,812 Kb |
| A Pen by Paul Demers | 2,526 Kb |
| Default Input, Textareas, Submits, and Buttons in iOS | 2,334 Kb |
| Icon Font Social Icons | 2,920 Kb |
Create amazing video scripts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Zeichensatz | Moklick | 2,058 Kb |
| Wrap_Test | Mscfourn | 7,503 Kb |
| Ghost | Mghayour | 11,738 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| Mesmerizing octopus | Jllodra | 3,549 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| A Pen by Bryan | Brydave | 2,286 Kb |
| Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
| BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
Do you want hide your ip address?
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!