HtmlDropdown（搜索）點擊位置問題-有解無憂

我們的Dropdown選項在文本下方，我們單擊然后Dropdown顯示在選項文本之前。

我希望即使在單擊后定位也能在一起，我們的下拉選單只是使用沒有任何文本的下拉選單，所以我們不會遇到任何問題，比如在某些內容開始出現問題之后。我已經嘗試過，但我做不到，但我會的試試看，也許你可以幫助我們:(

  
(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 hljs-property">theme '" 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 class="container">
    <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>

uj5u.com熱心網友回復：

這是因為您為串列設定了 margin-top：

if (offset.top   height > $(window).height()) {
  ul.css({
  marginTop: -(((offset.top   height) - $(window).height())   100)
  });
}

我洗掉了它并且它有效：

(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 hljs-property">theme   '" 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 class="container">
    <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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435253.html

標籤：javascript html jQuery css 下拉式菜单

上一篇：通過其他方式獲取認證資料

下一篇：選中選項時禁用某些輸入