Custom Select Box 2

Developer
Revolution Graphics
Size
5,033 Kb
Views
40,480
  1. Custom Select Box 2 Previews
  2. Custom Select Box 2 HTML Codes
  3. Custom Select Box 2 CSS Codes
  4. Custom Select Box 2 JS Codes

How do I make an custom select box 2?

Thanks https://github.com/marcj/jquery-selectBox. What is a custom select box 2? How do you make a custom select box 2? This script and codes were developed by Revolution Graphics on 01 October 2022, Saturday.

Custom Select Box 2 Previews
IQ Test

Custom Select Box 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Select Box 2</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>	<body class="noJS">
<select name="option-select" class="custom">	<option value="">Select an Option</option>	<option value="1">Option 1</option>	<option value="2">Option 2</option>	<option value="3">Option 3</option>	</select>
<select name="option-select" class="custom">	<option value="">Select an Option</option>	<option value="1">Option 1</option>	<option value="2">Option 2</option>	<option value="3">Option 3</option>	</select>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Select Box 2 - Script Codes CSS Codes

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { padding: 2%; background: #121112;
}
.customSelect { position: relative; font-size: 12px; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; float: left; margin-right: 10px;
}
.customSelect .selectedValue { padding: 5px 10px; margin-bottom: 0; line-height: 1.2; color: #0096ff; cursor: pointer; background-color: #101e29; background-color: rgba(0, 150, 255, 0.1); border: 1px solid #0096ff;
}
.customSelect .selectList { z-index: 100; position: absolute; left: -999em; top: -999em; padding: 5px 0; margin: 2px 0 0; list-style: none; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;
}
.customSelect.select-open .selectList { left: 0 !important; top: auto !important;
}
.customSelect .selectList dl { background: #101e29; background: rgba(0, 150, 255, 0.1);
}
.customSelect .selectList dl.defaultScrollbar { overflow-x: hidden; overflow-y: scroll;
}
.customSelect dl { margin: 0;
}
.customSelect dd { margin: 0; zoom: 1; cursor: pointer;
}
.customSelect .selected { color: #ffffff; text-decoration: none; background: rgba(0, 150, 255, 0.1);
}
.customSelect .selectList dd.hovered { background: #0096ff; color: #fff;
}
.customSelect dt { font-weight: bold; font-style: italic; padding: 2px 10px 2px 6px;
}
.customSelect dd { padding: 2px 10px 2px 8px;
}
.hasJS select.custom { position: absolute; left: -999em;
}
.customSelect.focused .selectedValue { box-shadow: 0 0 2px #00aedb;
}
.customSelect.disabled .selectedValue { border: 1px solid #ccc; color: #ccc; cursor: default;
}
.customSelect .caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid #0096ff; border-right: 4px solid transparent; border-left: 4px solid transparent; content: "";
}
.customSelect .selectValueWrap .caret { position: absolute; top: 12px; right: 10px; cursor: pointer;
}

Custom Select Box 2 - Script Codes JS Codes

// thanks https://github.com/roblaplaca/jQuery-Custom-Selectbox
var bodyTag = document.getElementsByTagName("body")[0];	bodyTag.className = bodyTag.className.replace("noJS", "hasJS");
(function(e){var t;window.SelectBoxManager=function(t){var n=[],r=this;e(document).click(function(t){if(e(t.target).parents(".customSelect").get(0)==null){r.close()}});this.add=function(e){n.push(e)};this.close=function(){e(n).each(function(){this.close()})}};var n=new SelectBoxManager;window.SelectBox=function(t){function m(){c=navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)?true:false;var e="";if(typeof i.selectbox.attr("id")!=="undefined"){e='id="select-'+i.selectbox.attr("id")+'"'}i.selectbox.wrap('<div class="customSelect" '+e+" />");s=i.selectbox.parents(".customSelect");l=i.selectbox.find("option");var t=['<div class="selectList"><div class="selectListOuterWrap"><div class="selectListInnerWrap"><div class="selectListTop"></div><dl>'];t.push(w());t.push('</dl><div class="selectListBottom"></div></div></div></div>');s.append('<div class="selectValueWrap"><div class="selectedValue">'+v+'</div> <span class="caret"></span> </div>'+t.join(""));f=s.find("dl");o=s.find(".selectedValue");u=s.find(".selectValueWrap");a=s.find(".selectList");s.width(i.width);f.width(i.width-2);g();n.add(r)}function g(){u.click(function(){if(h){i.selectbox.focus();r.close()}else if(p){if(c){i.selectbox.focus()}else{r.open()}}});f.click(function(t){var n=e(t.target);if(n.is("dd")||n.parents("dd")){if(t.target.tagName.toLowerCase()!="dd"){n=n.parents("dd")}if(n.get(0)){r.jumpToIndex(n.get(0).className.split(" ")[0].split("-")[1]);r.close();if(!c){i.selectbox.focus()}}}});i.selectbox.focus(function(e){d=true;s.addClass("focused")}).blur(function(e){d=false;s.removeClass("focused")});if(c){i.selectbox.change(function(t){b(e(this).find("option:selected").html())})}i.selectbox.keyup(function(e){r.close();l.each(function(e,t){if(t.selected){r.jumpToIndex(e);return false}})});y()}function y(){var t=e(".customSelect dd");t.off("mouseover");t.off("mouseout");t.on("mouseover",function(t){var n=e(t.target);if(t.target.tagName.toLowerCase()!="dd"){n=n.parents("dd")}n.addClass("hovered")});t.on("mouseout",function(t){var n=e(t.target);if(t.target.tagName.toLowerCase()!="dd"){n=n.parents("dd")}n.removeClass("hovered")})}function b(e){if(o.html()!=e){o.html(S(e));i.changeCallback(i.selectbox.val())}}function w(){var t=[];l.each(function(n,r){var i=e(this);var s=i.parents("optgroup");if(s.length>0&&i.prev().length===0){t.push("<dt>"+s.attr("label")+"</dt>")}var o="";if(r.className!=""){e(r.className.split(" ")).each(function(){o+='<span class="'+this+'"></span>'})}if(r.selected){v=o+S(e(r).html());t.push('<dd class="itm-'+n+' selected">'+o+r.innerHTML+"</dd>")}else{t.push('<dd class="itm-'+n+'">'+o+r.innerHTML+"</dd>")}});if(o&&o.get(0)!=null){o.html(v)}return t.join("")}function E(){f.css("height","auto");if(i.height&&f.height()>i.height){f.css("height",i.height);if(i.customScrollbar){r.scrollpane=f.jScrollPane(e.extend({contentWidth:200},i.scrollOptions))}else{f.addClass("defaultScrollbar")}}else{f.css({overflow:"hidden"})}}function S(e){var t=e.split("</span>");var n=t[t.length-1];t[t.length-1]="";var r=t.join("</SPAN>");return r+i.truncate(n)}var r=this,i=e.extend(true,{manager:n,customScrollbar:true,zIndex:100,changeCallback:function(e){},truncate:function(e){return e},scrollOptions:{}},t);var s,o,u,a,f,l,c=false,h=false,p=true,d=false,v="";this.sync=function(){l=i.selectbox.find("option");f.html(w());y();E()};this.disable=function(){p=false;s.addClass("disabled");i.selectbox.attr("disabled","disabled")};this.enable=function(){p=true;s.removeClass("disabled");i.selectbox.removeAttr("disabled")};this.close=function(){s.removeClass("select-open");s.css({"z-index":i.zIndex});h=false};this.open=function(){E();if(i.manager){i.manager.close()}s.addClass("select-open");if(r.scrollpane){}s.css({"z-index":i.zIndex+1});h=true};this.jumpToIndex=function(e){i.selectbox.get(0).selectedIndex=e;s.find(".selected").removeClass("selected");s.find(".itm-"+e).addClass("selected");b(s.find(".itm-"+e).html())};this.jumpToValue=function(e){var t=-1;l.each(function(n){if(this.innerHTML==e){t=n;return false}});if(t!=-1){r.jumpToIndex(t)}return t};m()}})(jQuery)
$(function() {	$("select.custom").each(function() {	var sb = new SelectBox({	selectbox: $(this),	height: 150,	width: 200	});	});	});
Custom Select Box 2 - Script Codes
Custom Select Box 2 - Script Codes
Home Page Home
Developer Revolution Graphics
Username rgfx
Uploaded October 01, 2022
Rating 3
Size 5,033 Kb
Views 40,480
Do you need developer help for Custom Select Box 2?

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!

Revolution Graphics (rgfx) Script Codes
Name
Icon-font animation troggle
SVG as a submit button
Signature pad
CSS Background
SVG Background Repeat - Works IN IE
Position Fixed center right
Fullsized Background Image slideshow
Progressively reveal dots on a Bezier curve
Simple Horizontal Stacked Bar
Cross browser radio buttons
Create amazing captions 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!