jquery 自定义select

<div class="select">
   <div class="select-input">2222</div>
   <ul class="select-options">
      <li class="select-option" data-value="111">111</li>
      <li class="select-option" data-value="222">222</li>
   </ul>
</div>

function openSelect() {

   if($('.select-options').css('opacity') == '0') {
      $('.select-options').css({
         'opacity': 1,
         'pointer-events': 'auto',
         '-webkit-transform': 'scale(1) translateY(0)',
         '-ms-transform': 'scale(1) translateY(0)',
         'transform': 'scale(1) translateY(0)',
      })
   } else {
      $('.select-options').css({
         'opacity': 0,
         'pointer-events': 'none',
         'transform': 'scale(.75) translateY(-21px)',
      })
   }
}

$('body').on('click', '.select-input', function(){
   try{
      window.event.stopPropagation();//非IE浏览器
   }
   catch(e){
      window.event.cancelBubble = true;//IE浏览器
   }
   openSelect()
})

$('html').click(function () {
   $('.select-options').css({
      'opacity': 0,
      'pointer-events': 'none',
      'transform': 'scale(.75) translateY(-21px)',
   })
})
$('.select-option').click(function () {
   openSelect()
   $('.select-input').html($(this).attr('data-value'))
})

.select-input{
   padding:0 10px;
   position: relative;
   cursor: pointer;
   height: 45px;
   line-height: 45px;
   border: 1px solid #F8F8F8;
   transition: all 1s;
   color: #fff;
}
.select-input:after {
   border-bottom: 2px solid #F8F8F8;
   border-right: 2px solid #F8F8F8;
   content: '';
   display: block;
   height: 5px;
   margin-top: -4px;
   pointer-events: none;
   position: absolute;
   right: 12px;
   top: 50%;
   -webkit-transform-origin: 66% 66%;
   -ms-transform-origin: 66% 66%;
   transform-origin: 66% 66%;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transition: all .15s ease-in-out;
   transition: all .15s ease-in-out;
   width: 5px;
}
.select-input:hover{
   border-color: #25D9F8;
   color: #25D9F8;
}
.select-input:hover:after {
   border-color: #25D9F8;
}
.select-options{
   padding:0s 0 0 0;
   background-color: #fff;
   /*border-radius: 5px;*/
   box-shadow: 0 0 0 1px rgb(68 68 68 / 11%);
   box-sizing: border-box;
   width: 100%;
   margin: 0 0 0 !important;
   opacity: 0;
   overflow: hidden;
   pointer-events: none;
   position: absolute;
   top: 100%;
   left: 0;
   -webkit-transform-origin: 50% 0;
   -ms-transform-origin: 50% 0;
   transform-origin: 50% 0;
   -webkit-transform: scale(.75) translateY(-21px);
   -ms-transform: scale(.75) translateY(-21px);
   transform: scale(.75) translateY(-21px);
   -webkit-transition: all .2s cubic-bezier(.5,0,0,1.25),opacity .15s ease-out;
   transition: all .2s cubic-bezier(.5,0,0,1.25),opacity .15s ease-out;
   z-index: 9;
   color: #000;
}
.select-option{
   padding:0 10px;
   height: 35px;
   line-height: 35px;
   cursor: pointer;
}
.select-option.active{
   font-weight: bold;
}
.select-option:hover{
   background: #f3f3f3;
}

标签：jquery,scale,translateY,自定义,transform,webkit,pointer,select
来源： https://www.cnblogs.com/anans/p/16384191.html