Fancy Select Demo

Developer
Paul Demers
Size
5,306 Kb
Views
80,960
  1. Fancy Select Demo Previews
  2. Fancy Select Demo HTML Codes
  3. Fancy Select Demo CSS Codes
  4. Fancy Select Demo JS Codes

How do I make an fancy select demo?

Using the FancySelect plugin to style out selects.. What is a fancy select demo? How do you make a fancy select demo? This script and codes were developed by Paul Demers on 28 August 2022, Sunday.

Fancy Select Demo Previews
IQ Test

Fancy Select Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Select Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="search_input_wrapper"> <input type="text" placeholder="Framingham, MA" class="search_input" />
</div>
<div class="states_input_wrapper"> <select class="states"> <option value="">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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fancy Select Demo - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { padding: 10em 0; background: #ce6528; color: #555;
}
.search_input_wrapper, .states_input_wrapper { background: rgba(204, 204, 204, 0.3); padding: 10px; width: 90%; margin: 0 auto 1em; border-radius: 3px;
}
.search_input { border: 1px solid #ccc; border-radius: 3px; padding: 1em; width: 100%; box-sizing: border-box !important; font-size: 1.25em;
}
div.fancy-select { position: relative; background: #fff; border: 1px solid #ccc; border-radius: 3px; width: 100%; font-size: 1.25em;
}
div.fancy-select.disabled { opacity: 0.5;
}
div.fancy-select div.trigger { cursor: pointer; padding: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; color: #4B5468; width: 100%;
}
div.fancy-select div.trigger:after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 5px solid transparent; border-top-color: #4B5468; top: 30px; right: 9px;
}
div.fancy-select div.trigger.open { background: #ccc; border: 1px solid #ccc; color: #555; box-shadow: none;
}
div.fancy-select div.trigger.open:after { border-top-color: #7A8498;
}
div.fancy-select ul.options { list-style: none; margin: 0; padding: .5em 0; position: absolute; top: 40px; left: 0; visibility: hidden; opacity: 0; z-index: 50; max-height: 200px; overflow: auto; background: #ccc; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); width: 100%; border-radius: 5px;
}
div.fancy-select ul.options.open { visibility: visible; top: 70px; opacity: 1;
}
div.fancy-select ul.options.overflowing { top: auto; bottom: 40px;
}
div.fancy-select ul.options.overflowing.open { top: auto; bottom: 50px;
}
div.fancy-select ul.options li { padding: .5em 1em; color: #555; cursor: pointer; white-space: nowrap; border-bottom: 1px solid #ddd;
}
div.fancy-select ul.options li.selected { background: rgba(43, 134, 134, 0.3); color: rgba(255, 255, 255, 0.75);
}
div.fancy-select ul.options li.hover { color: #fff;
}

Fancy Select Demo - 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) { return e.stopPropagation(); } else { 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);
$('.states').fancySelect();
$('select').on('change', function(){ var state = $('.states').val(), urlConstruct = '<a href="http://www.drinkingsherpa.com/states/' + state + '">test</a>'; console.log(urlConstruct);
});
Fancy Select Demo - Script Codes
Fancy Select Demo - Script Codes
Home Page Home
Developer Paul Demers
Username demersdesigns
Uploaded August 28, 2022
Rating 3
Size 5,306 Kb
Views 80,960
Do you need developer help for Fancy Select Demo?

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
Animated Gradient Text Backgrounds
CSS3 Filters Exploration
Half Circle Hover Effect
Sticky Header Fade In On Scroll
CodePen Boston Layout 1
Icon Font Social Icons
Project Timeline Visualization
A Pen by Paul Demers
Default Input, Textareas, Submits, and Buttons in iOS
Fun with transition
Create amazing web content 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!