<div class="left">
 
  <select name="topic" id="topic" class="mask" data-type="select"  data-scroll="large" data-width="medium" >
    <option value="1">Select Topics</option>
    <option value="2" selected="selected">Politics</option>
    <option value="3">Business</option>
    <option value="4">Travel</option>
    <option value="5">Sports</option>
    <option value="6">Paprazy</option>
      <option value="3">Business</option>
    <option value="4">Travel</option>
    <option value="5">Sports</option>
    <option value="6">Paprazy</option>
      <option value="3">Business</option>
    <option value="4">Travel</option>
    <option value="5">Sports</option>
    <option value="6">Paprazy</option>
      <option value="3">Business</option>
    <option value="4">Travel</option>
    <option value="5">Sports</option>
    <option value="6">Paprazy</option>
  </select>
  
</div>


<div class="left">
  
  <select name="buy" id="buy" class="mask" data-type="select" data-width="small">
    <option value="1">Select Buy</option>
    <option value="2">Paypal</option>
    <option value="3">Master</option>
    <option value="3">Visa</option>
    
  </select> 
  
</div>

<div class="left">
  
  <select name="buy" id="buy" class="mask" data-type="select" data-width="160">
    <option value="1">Select Color</option>
    <option value="2">Red</option>
    <option value="3">Blue</option>
    <option value="3">Orange</option>
    <option value="3">Green</option>
  </select> 
  
</div>

<div class="left">
  
  <select name="vga" id="vga" class="mask" data-type="select" data-scroll="false">
    <option value="1">Select Display</option>
    <option value="2">Nvidia</option>
    <option value="3">MSI</option>
    <option value="3">Asus</option>
    <option value="3">Ati</option>
  </select> 
  
</div>



@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(https://akman.me/lib/standard/ss-standard.css);


/*
 * @ reset */

*       { margimn:0; padding: 0; list-style-type:none }
a img   { border: 0}
s,i     { font-style:normal; text-decoration:none }

i       { font-family: 'entypo' }




/*
 * @ body */

body    { background:#ebebeb;  font:normal 1em Open Sans,Arial; font-weight:300}
body    { color:#222; padding:20px }

.hidden { display:none }
.left   { float:left; margin-left:8px }


/*
 * @ form mask */


.fmask         { position:relative }
.fmask:after   { clear:both; display:block; content:" " }


/*
 * @ form mask : select */

.fmask.select         { width:160px; transition:190ms; font-size:0.9em; }
.fmask.select .h      { transition:190ms; border-radius:4px; background:white; padding:10px 8px;color:#666 }
.fmask.select.on .h   { border-radius:4px 4px 0 0  }


.fmask.select .b      { border-radius:0 0 4px 4px; display:none;position:absolute;width:100%;z-index:1; background:#fff; border-top:1px solid #ededed}
.fmask.select .s      { overflow:auto; height:100px }

.fmask.select li      { padding:8px 8px; cursor:default; line-height:16px}


/*
 @ form mask: select width turleri  */

.fmask.select[data-width='medium']    { width:220px }
.fmask.select[data-width='large']     { width:280px }
.fmask.select[data-width='small']     { width:120px }
.fmask.select[data-width='likit']     { width:100% }

/*
 @ form mask: select scroll */

.fmask.select[data-scroll='medium'] .s { height:280px }
.fmask.select[data-scroll='large'] .s  { height:570px }
.fmask.select[data-scroll='small'] .s  { height:90px }
.fmask.select[data-scroll='false'] .s   { overflow:visible; height:auto }



.fmask.select li[data-selected='on']  { color:#D6D7D8}
.fmask.select li:hover                { background:#03bcff; color:white }


.fmask.select .h i.ss-dropdown         { right: 11px; top: 50%; transform:translate(0, -50%) ;transition:190ms; color:#49b2e3; position:absolute; right:9px; font-size:12px }
.fmask.select .h:hover i.ss-dropdown  { color:#000  }

.fmask.select.on .h i.ss-dropdown      { transform:rotate(180deg); top:2px; color:#888 }




.fmask {  margin-bottom:10px}
// - - - - - - - - - - - - - - - - - - - - - - - - -
  
  jQuery.fn.clickoutside = function(callback) {
    var outside = 1, self = $(this);
    self.cb = callback;
    this.click(function() { 
      outside = 0; 
    });
    $(document).click(function() { 
      outside && self.cb();
      outside = 1;
    });
    return $(this);
  } 
  
 // - - - - - - - - - - - - - - - - - - - - - - - - -


 var fmask = {
   
   'select':{
     
     'scroll':{
       
       'status' : true,
       'mod'    : {'small': 90, 'medium' : 120, 'large'  : 370 }
     }
   },
   
   'total' : $('.mask').length,
   'count' : 1
}
    

$('.mask').each(function(index){
  
  e = this ;
  
  // @ mask element : select 
  
  if($(e).attr('data-type')=='select')
  {  
    
    option = '';
   
    i = 0;
    
    $(e).children('option').each(function(index){
    
      selected = $(this).attr('selected')? 'data-selected="on"' : '' ;
      
      label    = (i==0)? $(this).html() : label ;
      
      label    = selected!=''? $(this).html() :label; 
      
      option   = option+'<li '+selected+' data-value="'+$(this).attr('value')+'">'+$(this).html()+'</li>';
     
      i++;
      
    })  
   
    // @ data width
    
    width = '';
    
    if($(e).attr('data-width'))
    {
      width = Number($(e).attr('data-width'))? $(e).attr('data-width') : false;
      width = (width)? 'style="width:'+width+'px"' : 'data-width="'+$(e).attr('data-width')+'"' ;
    }
     
   
    // @ data scroll
    
    scroll = '';
    
    fmask.select.scroll.status = $(e).attr('data-scroll')=='false' ? false : true ;
   
    scroll = $(e).attr('data-scroll')? 'data-scroll="'+$(e).attr('data-scroll')+'"': '' ;
      
    if(fmask.select.scroll.status)
    {
      
      j = $(e).attr('data-scroll')? $(e).attr('data-scroll') : fmask.select.scroll.mod.medium ;
      
      if(!Number(j))
      {
        switch(j)
        {
          case 'medium'  : j=fmask.select.scroll.mod.medium; break;
          case 'small'   : j=fmask.select.scroll.mod.small;  break;
          case 'large'   : j=fmask.select.scroll.mod.large;  break;
        }
      }
      
    }
       
    // @ select dom html
    
    data  ='<div class="fmask select" id="select-'+$(e).attr('id')+'" '+width+' '+scroll+'>'
            +'<div class="h">'
              +'<i></i>'
              +'<i class="ss-standard ss-dropdown"></i>'
              +'<label>'+label+'</label>'
            +'</div>'
            +'<div class="b"><div class="s"><ol>'+option+'</ol></div></div>'
          +'</div>';
    
    $(e).addClass('hidden').after(data);
    
    
    // @ scroll status
    
    if(fmask.select.scroll.status)
    {
      $('#select-'+$(e).attr('id')+' .s').slimScroll({ height:j+'px' });  
    }
   
  }
  
  // @ dongu sonrası tetikle
  
  if( fmask.total== fmask.count ) { formmask(); }
  
  fmask.count ++;
   
})
  
  
  
// form mask after function

function formmask(){
 
 $('.select .h').click(function(event){
		
		s = $(this).parent();
		b = $(this).next();
    
    label  = $(this).children('label');
    option = $(b).find('li');
    select = $('#'+$(s).attr('id').replace('select-',''));
    
	  
    if(!$(b).hasClass('on')) 
    {  
      $('.select').removeClass('on');
      $('.select .b').removeClass('on').slideUp('fast');
      $(b).addClass('on').slideDown('fast'); 
      $(s).addClass('on');
       
    }
    else
    {
      $(b).removeClass('on').slideUp('fast');
      $(s).removeClass('on');
    }
    
    $(option).click(function(){
    
      $(b).removeClass('on').slideUp('fast');
      $(label).html($(this).html());
    
      $(option).removeAttr('data-selected');
      $(this).attr('data-selected','on');
      $(select).val($(this).attr('data-value'));
      $(s).removeClass('on');
      
    });
   
  })
    
 
  $('.fmask.select').clickoutside(function(){
    
    fmask_select_close();
    
  });
  
 
   $(document).keydown(function(e){
	
    if(e.keyCode==27) {
		  
      fmask_select_close();
    }
    
   });
  
}


function fmask_select_close(){
   
  $('.fmask.select .b').removeClass('on').slideUp('fast');
  $('.fmask.select').removeClass('on');
}



Run Pen

External CSS

  1. //ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://akman.me/lib/slimscroll.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js