Our Dropdown option is below the text and we click then Dropdown is being shown before the option text.
I want the positioning to be together even after clicking, Our Dropdown is just using Dropdown without any text, so we are not facing any problem like after some content the problem starts.I have tried but I am not able to do it but I will try, maybe you can help us :(
(function($){
$.fn.selectstyle = function(option){
var defaults = {
width : 250,
height : 300,
theme : 'light'
},
setting = $.extend({}, defaults, option);
this.each(function(){
var $this = $(this),
parent = $(this).parent(),
html = '',
html_op = '',
search = $this.attr('data-search'),
name = $this.attr('name'),
style = $this.attr('style'),
placeholder = $this.attr('placeholder'),
id = $this.attr('id');
setting.width = (parseInt($this.attr('width') == null ? $this.width() : $this.attr('width') ) 10 ) 'px';
setting.theme = $this.attr('theme') != null ? $this.attr('theme') : setting.theme;
$this.find('option').each(function (e) {
var $this_a = $(this),
val = $this_a.val(),
image = $this_a.attr('data-image'),
text = $this_a.html();
if(val == null){
val = text;
}
html_op = '<li data-title="' text '" value="' val '"';
if($this_a.attr('font-family') != null){
html_op = ' style="font-family' $this_a.attr('font-family') '"';
}
html_op = '>';
if(image != null){
html_op = '<div ><img src="' image '"></div>';
}
html_op = '<div >' text '</div></li>';
});
$this.hide();
html =
'<div style="width:' parseInt(setting.width) 'px;">'
'<div id="select_style" style="width:' parseInt(setting.width) 'px;' style '">'
'<div id="select_style_text" style="margin-right:15px;width:' (parseInt(setting.width) - 20) 'px;position:relative;">' placeholder '</div>'
'</div>';
if(search == "true"){
html = '<ul id="select_style_ul" sid="' id '" style="max-height:' setting.height 'px;width:' (parseInt(setting.width) 20) 'px;"><div id="ss_search"><input type="text" placeholder="Search"></div><ul style="max-height:' (parseInt(setting.height) - 53) 'px;width:' (parseInt(setting.width) 20) 'px;" >' html_op '</ul></ul>';
}
else{
html = '<ul id="select_style_ul" sid="' id '" style="max-height:' setting.height 'px;width:' (parseInt(setting.width) 20) 'px;" >' html_op '</ul>';
}
html = '</div>';
$(html).insertAfter($this);
});
$("body").delegate( "div#ss_search input", "keyup", function(e) {
var val = $(this).val(), flag=false;
$('#nosearch').remove();
$(this).parent().parent().find('li').each(function(index, el) {
if($(el).text().indexOf(val) > -1){
$(el).show();
flag=true;
}
else{
$(el).hide();
}
});
if (!flag) {$(this).parent().parent().append('<div id="nosearch">Nothing Found</div>')};
});
$("body").delegate( "div#select_style", "click", function(e) {
$('ul#select_style_ul').hide();
var ul = $(this).parent('div').find('ul#select_style_ul');
ul.show();
var height = ul.height();
var offset = $(this).offset();
if(offset.top height > $(window).height()){
ul.css({
marginTop: -(((offset.top height) - $(window).height()) 100)
});
}
});
$("body").delegate("ul#select_style_ul li", "click", function(e) {
var txt = $(this).data('title'),
vl = $(this).attr('value'),
sid = $(this).parent('ul').attr('sid');
$(this).parents('ul#select_style_ul').hide();
$(this).parents('ul#select_style_ul').parent('div').find('div#select_style_text').html(txt);
$('#' sid).children('option').filter(function(){return $(this).val()==vl}).prop('selected',true).change();
});
$(document).delegate("body", "click", function(e) {
var clickedOn=$(e.target);
if(!clickedOn.parents().andSelf().is('ul#select_style_ul, div#select_style')){
$('ul#select_style_ul').fadeOut(400);
$('div#ss_search').children('input').val('').trigger('keyup');
}
});
}
})(jQuery);/** default and google theme **/
.selectstyle{position:relative;}
.ss_dib{display:inline-block;vertical-align:top;}
.ss_button{margin:0;vertical-align:top;color:#595959;border: 1px solid #cbcbcb;border-radius:3px;width:250px;cursor:pointer;text-decoration:none;background:none;padding:10px;overflow:hidden;clear:both;display:inline-block;vertical-align:top;font-size:12px;font-weight:bold;word-break:break-all;}
.ss_text{white-space:normal;text-overflow:ellipsis;text-indent:0;white-space:nowrap;overflow:hidden;}
.ss_image{position:absolute;width:7px;height:11px;background:url('../images/google.png') no-repeat;}
.ss_ul{list-style:none;padding:8px 0; margin:0; margin-top:-35px;position:absolute;background:#fff;border:1px solid #ccc;-moz-box-shadow:0 1px 5px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 5px 1px rgba(0,0,0,0.1);box-shadow:0 1px 5px 1px rgba(0,0,0,0.1); border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px; display:none;overflow:auto;z-index:100;}
.ss_ulsearch{margin:0; margin-top:-35px;position:absolute;background:#fff;border:1px solid #ccc;-moz-box-shadow:0 1px 5px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 5px 1px rgba(0,0,0,0.1);box-shadow:0 1px 5px 1px rgba(0,0,0,0.1); border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;overflow:auto;z-index:100;display:none;}
.ss_ulsearch .ss_ul{display:block;position:relative;margin-top:0;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
.ss_ulsearch .search{border-bottom:1px solid #ccc;padding:0;}
.ss_ulsearch .search input{background:inherit;border:none;height:100%;padding:10px 15px;outline:none;font-size:14px;width:calc(100% - 30px);width:-webkit-calc(100% - 30px);width:-moz-calc(100% - 30px);width:-o-calc(100% - 30px);background:url('../images/ful_grid_img.png') no-repeat;background-position: top 8px right 6px;}
.ss_ulsearch .search input:focus{outline:none;}
.ss_ulsearch .nosearch{text-align:center;font-size:12px;padding-bottom:10px;background:#fff;}
.ss_ul li{padding:10px 15px;cursor:pointer;border:none;text-align:left;color:#595959;transition-duration:.3s;-moz-transition-duration:.3s;-webkit-transition-duration:.3s;-o-transition-duration:.3s;font-size:14px;}
.ss_ul li:hover{border:none;background:#eee;}
.ss_ul li .ssli_text{vertical-align:top;display:inline-block;}
.ss_ul li .ssli_image{display:inline-block;width:16px;height:16px;margin-right:10px;margin-top:-1px;vertical-align:top;}
.ss_ul li .ssli_image img{width:16px;height:16px;}
.ss_ul::-webkit-scrollbar {width:10px;}
.ss_ul::-webkit-scrollbar:horizontal{height:10px;}
.ss_ul::-webkit-scrollbar-track {border-left:1px solid #D3D3D3;background:#F5F5F5;}
.ss_ul::-webkit-scrollbar-thumb {background:#C4C4C4;}
/** Dark theme **/
.selectstyle.dark{position:relative;}
.selectstyle.dark .ss_button{color:#eee;border: 1px solid #ccc;background:#5B5B5B;}
.selectstyle.dark .ss_image{width:16px;height:16px;background:url('../images/br_down.png') no-repeat;margin-left:-8px;margin-top:-2px;}
.selectstyle.dark .ss_ul{background:#777;border-color:#333;-moz-box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);-webkit-box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);}
.selectstyle.dark .ss_ulsearch .ss_ul{display:block;position:relative;margin-top:0;border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
.selectstyle.dark .ss_ulsearch{background:#5B5B5B;border-color:#333;-moz-box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);-webkit-box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);box-shadow:0 1px 5px 1px rgba(255,255,255,0.15);}
.selectstyle.dark .ss_ulsearch .search{border-bottom-color:#333;}
.selectstyle.dark .ss_ulsearch .search input{background:url('../images/search.png') no-repeat;background-position: top 8px right 6px;background-size:24px 24px;color:#eee;}
.selectstyle.dark .ss_ulsearch .nosearch{background:#777;}
.selectstyle.dark .ss_ul li{color:#ddd;}
.selectstyle.dark .ss_ul li:hover{border:none;background:#444;color:#eee;}
.selectstyle.dark .ss_ul::-webkit-scrollbar-track {border-left:1px solid #333;background:#888;}
.selectstyle.dark .ss_ul::-webkit-scrollbar-thumb {background:#5B5B5B;}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery selectstyle Plugin Demos</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1;}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
body{background:#F7F7F7;width:100%;height:100%;font-family:'Roboto', helvetica, sans-serif;}
.container { margin:150px auto; max-width:600px;}
h2 { margin:30px auto;}
</style>
<link href="selectstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div >
<p> praesentium totam voluptatem optio fuga quibusdam obcaecati eos nostrum, tempora architecto sed nam modi molestiae sunt velit, unde est. Assumenda nesciunt, sint obcaecati odit minus dolorum perspiciatis omnis, accusantium velit inventore iusto consectetur sunt. Facere ipsum quis amet, velit blanditiis culpa asperiores modi iure laudantium? Libero deleniti reiciendis consectetur minus suscipit fuga aliquam facilis illo corporis? Quo recusandae similique, quos quia aperiam quam optio eius minus libero, consectetur, eveniet ullam ipsa possimus officiis laborum dolorum at. Ipsa nemo et voluptate, beatae rerum dolor facere consectetur excepturi itaque amet, eum dignissimos autem quis nisi quos, veritatis quaerat? Unde ipsam eos inventore perspiciatis rerum eaque repellendus corrupti rem praesentium architecto! Error, repellat ducimus ullam voluptatem earum et dolor quasi ipsum dicta facere expedita quod officia. Cumque perspiciatis commodi fuga rerum dolorem aperiam recusandae maxime consequuntur unde placeat atque sint, nobis exercitationem enim libero recusandae ad officia nihil delectus laboriosam facilis laudantium! Saepe quia ipsa accusamus omnis rem officia laborum harum eveniet doloremque debitis unde pariatur, voluptas vitae animi odit? Harum enim illum eaque eum, reiciendis vero aut quidem eius? Porro ea repudiandae delectus, sint dicta totam illo autem veritatis aperiam iste minus recusandae, officia ducimus. Alias esse animi, enim vero earum voluptate dicta fugit eum natus mollitia cupiditate est libero perspiciatis voluptas quibusdam repellat quam officia reiciendis? Id tempora quaerat esse saepe sequi, ut praesentium consectetur perspiciatis nam fugit natus necessitatibus impedit provident consequatur hic totam. Nihil iure quasi eligendi minima aspernatur, repellendus sint, officiis nobis ipsa maxime aperiam neque consequatur culpa praesentium eius harum facilis corrupti! Sed quae tempore earum optio dolore doloremque quas laborum dolorum iure minus itaque voluptatibus aliquam voluptatum magnam rem similique, exercitationem accusantium ipsam mollitia. Rerum consectetur earum, qui nesciunt voluptatum nostrum possimus tempora nobis eaque ducimus. Quod quam tempore laborum labore minima facere aliquam voluptatem illum, cumque magnam illo excepturi ipsa, harum reiciendis natus nesciunt pariatur cum quae atque quos esse placeat, qui ab. Consequatur iusto cupiditate exercitationem ut sequi dicta officiis sunt recusandae eaque odio dolores corporis magni maiores, quibusdam distinctio harum, atque natus officia id sed consequuntur, suscipit impedit inventore delectus? Id nisi beatae placeat quis minima reprehenderit eligendi non sequi magni. Odio possimus quaerat fugiat vero rerum accusamus molestiae voluptas reiciendis sequi libero alias necessitatibus veritatis aspernatur deleniti dolorum officia exercitationem quia est ex, voluptatum sint reprehenderit quos atque non. Sapiente laborum dolore saepe minima culpa eaque inventore nisi natus. Iusto maxime temporibus, officia reiciendis numquam, itaque molestias nobis dolores quas nulla doloremque repellendus repudiandae quasi? Nihil omnis, aut illo hic rem ipsa nostrum modi, reiciendis sunt dicta eligendi similique perspiciatis autem, cupiditate voluptas vel consequuntur sint id quam possimus odio recusandae. Aliquid, blanditiis deserunt suscipit cumque error, neque sunt voluptates enim expedita ratione repellendus corrupti, earum facilis velit? Maxime vitae deleniti id delectus quaerat accusamus aliquid?
</p>
<select theme="google" width="400" style="" placeholder="Select Your Favorite" data-search="true">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
</select>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="selectstyle.js"></script>
<script>
jQuery(document).ready(function($) {
$('select').selectstyle({
width : 400,
height : 300,
theme : 'light',
onchange : function(val){}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>CodePudding user response：
This is because you set a margin-top to the list:
if (offset.top height > $(window).height()) {
ul.css({
marginTop: -(((offset.top height) - $(window).height()) 100)
});
}
I removed it and it works:
(function($) {
$.fn.selectstyle = function(option) {
var defaults = {
width: 250,
height: 300,
theme: 'light'
},
setting = $.extend({}, defaults, option);
this.each(function() {
var $this = $(this),
parent = $(this).parent(),
html = '',
html_op = '',
search = $this.attr('data-search'),
name = $this.attr('name'),
style = $this.attr('style'),
placeholder = $this.attr('placeholder'),
id = $this.attr('id');
setting.width = (parseInt($this.attr('width') == null ? $this.width() : $this.attr('width')) 10) 'px';
setting.theme = $this.attr('theme') != null ? $this.attr('theme') : setting.theme;
$this.find('option').each(function(e) {
var $this_a = $(this),
val = $this_a.val(),
image = $this_a.attr('data-image'),
text = $this_a.html();
if (val == null) {
val = text;
}
html_op = '<li data-title="' text '" value="' val '"';
if ($this_a.attr('font-family') != null) {
html_op = ' style="font-family' $this_a.attr('font-family') '"';
}
html_op = '>';
if (image != null) {
html_op = '<div ><img src="' image '"></div>';
}
html_op = '<div >' text '</div></li>';
});
$this.hide();
html =
'<div style="width:' parseInt(setting.width) 'px;">'
'<div id="select_style" style="width:' parseInt(setting.width) 'px;' style '">'
'<div id="select_style_text" style="margin-right:15px;width:' (parseInt(setting.width) - 20) 'px;position:relative;">' placeholder '</div>'
'</div>';
if (search == "true") {
html = '<ul id="select_style_ul" sid="' id '" style="max-height:' setting.height 'px;width:' (parseInt(setting.width) 20) 'px;"><div id="ss_search"><input type="text" placeholder="Search"></div><ul style="max-height:' (parseInt(setting.height) - 53) 'px;width:' (parseInt(setting.width) 20) 'px;" >' html_op '</ul></ul>';
} else {
html = '<ul id="select_style_ul" sid="' id '" style="max-height:' setting.height 'px;width:' (parseInt(setting.width) 20) 'px;" >' html_op '</ul>';
}
html = '</div>';
$(html).insertAfter($this);
});
$("body").delegate("div#ss_search input", "keyup", function(e) {
var val = $(this).val(),
flag = false;
$('#nosearch').remove();
$(this).parent().parent().find('li').each(function(index, el) {
if ($(el).text().indexOf(val) > -1) {
$(el).show();
flag = true;
} else {
$(el).hide();
}
});
if (!flag) {
$(this).parent().parent().append('<div id="nosearch">Nothing Found</div>')
};
});
$("body").delegate("div#select_style", "click", function(e) {
$('ul#select_style_ul').hide();
var ul = $(this).parent('div').find('ul#select_style_ul');
ul.show();
var height = ul.height();
var offset = $(this).offset();
// if (offset.top height > $(window).height()) {
// ul.css({
// marginTop: -(((offset.top height) - $(window).height()) 100)
// });
//}
});
$("body").delegate("ul#select_style_ul li", "click", function(e) {
var txt = $(this).data('title'),
vl = $(this).attr('value'),
sid = $(this).parent('ul').attr('sid');
$(this).parents('ul#select_style_ul').hide();
$(this).parents('ul#select_style_ul').parent('div').find('div#select_style_text').html(txt);
$('#' sid).children('option').filter(function() {
return $(this).val() == vl
}).prop('selected', true).change();
});
$(document).delegate("body", "click", function(e) {
var clickedOn = $(e.target);
if (!clickedOn.parents().andSelf().is('ul#select_style_ul, div#select_style')) {
$('ul#select_style_ul').fadeOut(400);
$('div#ss_search').children('input').val('').trigger('keyup');
}
});
}
})(jQuery);/** default and google theme **/
.selectstyle {
position: relative;
}
.ss_dib {
display: inline-block;
vertical-align: top;
}
.ss_button {
margin: 0;
vertical-align: top;
color: #595959;
border: 1px solid #cbcbcb;
border-radius: 3px;
width: 250px;
cursor: pointer;
text-decoration: none;
background: none;
padding: 10px;
overflow: hidden;
clear: both;
display: inline-block;
vertical-align: top;
font-size: 12px;
font-weight: bold;
word-break: break-all;
}
.ss_text {
white-space: normal;
text-overflow: ellipsis;
text-indent: 0;
white-space: nowrap;
overflow: hidden;
}
.ss_image {
position: absolute;
width: 7px;
height: 11px;
background: url('../images/google.png') no-repeat;
}
.ss_ul {
list-style: none;
padding: 8px 0;
margin: 0;
margin-top: -35px;
position: absolute;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: none;
overflow: auto;
z-index: 100;
}
.ss_ulsearch {
margin: 0;
margin-top: -35px;
position: absolute;
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow: auto;
z-index: 100;
display: none;
}
.ss_ulsearch .ss_ul {
display: block;
position: relative;
margin-top: 0;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
.ss_ulsearch .search {
border-bottom: 1px solid #ccc;
padding: 0;
}
.ss_ulsearch .search input {
background: inherit;
border: none;
height: 100%;
padding: 10px 15px;
outline: none;
font-size: 14px;
width: calc(100% - 30px);
width: -webkit-calc(100% - 30px);
width: -moz-calc(100% - 30px);
width: -o-calc(100% - 30px);
background: url('../images/ful_grid_img.png') no-repeat;
background-position: top 8px right 6px;
}
.ss_ulsearch .search input:focus {
outline: none;
}
.ss_ulsearch .nosearch {
text-align: center;
font-size: 12px;
padding-bottom: 10px;
background: #fff;
}
.ss_ul li {
padding: 10px 15px;
cursor: pointer;
border: none;
text-align: left;
color: #595959;
transition-duration: .3s;
-moz-transition-duration: .3s;
-webkit-transition-duration: .3s;
-o-transition-duration: .3s;
font-size: 14px;
}
.ss_ul li:hover {
border: none;
background: #eee;
}
.ss_ul li .ssli_text {
vertical-align: top;
display: inline-block;
}
.ss_ul li .ssli_image {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
margin-top: -1px;
vertical-align: top;
}
.ss_ul li .ssli_image img {
width: 16px;
height: 16px;
}
.ss_ul::-webkit-scrollbar {
width: 10px;
}
.ss_ul::-webkit-scrollbar:horizontal {
height: 10px;
}
.ss_ul::-webkit-scrollbar-track {
border-left: 1px solid #D3D3D3;
background: #F5F5F5;
}
.ss_ul::-webkit-scrollbar-thumb {
background: #C4C4C4;
}
/** Dark theme **/
.selectstyle.dark {
position: relative;
}
.selectstyle.dark .ss_button {
color: #eee;
border: 1px solid #ccc;
background: #5B5B5B;
}
.selectstyle.dark .ss_image {
width: 16px;
height: 16px;
background: url('../images/br_down.png') no-repeat;
margin-left: -8px;
margin-top: -2px;
}
.selectstyle.dark .ss_ul {
background: #777;
border-color: #333;
-moz-box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
-webkit-box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
}
.selectstyle.dark .ss_ulsearch .ss_ul {
display: block;
position: relative;
margin-top: 0;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
.selectstyle.dark .ss_ulsearch {
background: #5B5B5B;
border-color: #333;
-moz-box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
-webkit-box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 5px 1px rgba(255, 255, 255, 0.15);
}
.selectstyle.dark .ss_ulsearch .search {
border-bottom-color: #333;
}
.selectstyle.dark .ss_ulsearch .search input {
background: url('../images/search.png') no-repeat;
background-position: top 8px right 6px;
background-size: 24px 24px;
color: #eee;
}
.selectstyle.dark .ss_ulsearch .nosearch {
background: #777;
}
.selectstyle.dark .ss_ul li {
color: #ddd;
}
.selectstyle.dark .ss_ul li:hover {
border: none;
background: #444;
color: #eee;
}
.selectstyle.dark .ss_ul::-webkit-scrollbar-track {
border-left: 1px solid #333;
background: #888;
}
.selectstyle.dark .ss_ul::-webkit-scrollbar-thumb {
background: #5B5B5B;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery selectstyle Plugin Demos</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1;
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
body {
background: #F7F7F7;
width: 100%;
height: 100%;
font-family: 'Roboto', helvetica, sans-serif;
}
.container {
margin: 150px auto;
max-width: 600px;
}
h2 {
margin: 30px auto;
}
</style>
<link href="selectstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div >
<p> praesentium totam voluptatem optio fuga quibusdam obcaecati eos nostrum, tempora architecto sed nam modi molestiae sunt velit, unde est. Assumenda nesciunt, sint obcaecati odit minus dolorum perspiciatis omnis, accusantium velit inventore iusto consectetur
sunt. Facere ipsum quis amet, velit blanditiis culpa asperiores modi iure laudantium? Libero deleniti reiciendis consectetur minus suscipit fuga aliquam facilis illo corporis? Quo recusandae similique, quos quia aperiam quam optio eius minus libero,
consectetur, eveniet ullam ipsa possimus officiis laborum dolorum at. Ipsa nemo et voluptate, beatae rerum dolor facere consectetur excepturi itaque amet, eum dignissimos autem quis nisi quos, veritatis quaerat? Unde ipsam eos inventore perspiciatis
rerum eaque repellendus corrupti rem praesentium architecto! Error, repellat ducimus ullam voluptatem earum et dolor quasi ipsum dicta facere expedita quod officia. Cumque perspiciatis commodi fuga rerum dolorem aperiam recusandae maxime consequuntur
unde placeat atque sint, nobis exercitationem enim libero recusandae ad officia nihil delectus laboriosam facilis laudantium! Saepe quia ipsa accusamus omnis rem officia laborum harum eveniet doloremque debitis unde pariatur, voluptas vitae animi
odit? Harum enim illum eaque eum, reiciendis vero aut quidem eius? Porro ea repudiandae delectus, sint dicta totam illo autem veritatis aperiam iste minus recusandae, officia ducimus. Alias esse animi, enim vero earum voluptate dicta fugit eum natus
mollitia cupiditate est libero perspiciatis voluptas quibusdam repellat quam officia reiciendis? Id tempora quaerat esse saepe sequi, ut praesentium consectetur perspiciatis nam fugit natus necessitatibus impedit provident consequatur hic totam.
Nihil iure quasi eligendi minima aspernatur, repellendus sint, officiis nobis ipsa maxime aperiam neque consequatur culpa praesentium eius harum facilis corrupti! Sed quae tempore earum optio dolore doloremque quas laborum dolorum iure minus itaque
voluptatibus aliquam voluptatum magnam rem similique, exercitationem accusantium ipsam mollitia. Rerum consectetur earum, qui nesciunt voluptatum nostrum possimus tempora nobis eaque ducimus. Quod quam tempore laborum labore minima facere aliquam
voluptatem illum, cumque magnam illo excepturi ipsa, harum reiciendis natus nesciunt pariatur cum quae atque quos esse placeat, qui ab. Consequatur iusto cupiditate exercitationem ut sequi dicta officiis sunt recusandae eaque odio dolores corporis
magni maiores, quibusdam distinctio harum, atque natus officia id sed consequuntur, suscipit impedit inventore delectus? Id nisi beatae placeat quis minima reprehenderit eligendi non sequi magni. Odio possimus quaerat fugiat vero rerum accusamus
molestiae voluptas reiciendis sequi libero alias necessitatibus veritatis aspernatur deleniti dolorum officia exercitationem quia est ex, voluptatum sint reprehenderit quos atque non. Sapiente laborum dolore saepe minima culpa eaque inventore nisi
natus. Iusto maxime temporibus, officia reiciendis numquam, itaque molestias nobis dolores quas nulla doloremque repellendus repudiandae quasi? Nihil omnis, aut illo hic rem ipsa nostrum modi, reiciendis sunt dicta eligendi similique perspiciatis
autem, cupiditate voluptas vel consequuntur sint id quam possimus odio recusandae. Aliquid, blanditiis deserunt suscipit cumque error, neque sunt voluptates enim expedita ratione repellendus corrupti, earum facilis velit? Maxime vitae deleniti id
delectus quaerat accusamus aliquid?
</p>
<select theme="google" width="400" style="" placeholder="Select Your Favorite" data-search="true">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
</select>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="selectstyle.js"></script>
<script>
jQuery(document).ready(function($) {
$('select').selectstyle({
width: 400,
height: 300,
theme: 'light',
onchange: function(val) {}
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>