Custom select option

select.js

// CUSTOM SELECT
$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';
  
  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function(event) {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});
$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
// CUSTOM SELECT end

select.pug

.select__block
	select.custom-select.sources#sources(name="sources" placeholder="placeholder")
		option(value="placeholder") Name
		option(value="placeholder") Name
		option(value="placeholder") Name

select.sass

// CUSTOM SELECT
.custom-select-wrapper
  position: relative
  display: inline-block
  user-select: none
  max-width: 290px
  width: 100%

.custom-select-wrapper select
  display: none

.custom-select
  position: relative
  display: inline-block
  width: 100%

.custom-select-trigger
  position: relative
  display: block
  width: 100%
  height: 39px
  line-height: 39px
  padding: 0 15px
  font-size: 15px
  color: #797979
  background: #fff
  border-radius: 4px
  cursor: pointer
  text-align: left
  box-sizing: border-box
  border: 1px solid #ccc

.custom-select-trigger:after
  position: absolute
  display: block
  content: ''
  width: 7px 
  height: 7px
  top: 50% 
  right: 15px
  margin-top: -3px
  border-bottom: 1px solid #797979
  border-right: 1px solid #797979
  transform: rotate(45deg) translateY(-50%)
  transition: all .4s ease-in-out
  transform-origin: 50% 0

.custom-select.opened .custom-select-trigger:after
  margin-top: 3px
  transform: rotate(-135deg) translateY(-50%)

.custom-options
  position: absolute
  display: block
  top: 100% 
  left: 0 
  right: 0
  min-width: 100%
  margin: 15px 0
  border: 1px solid #ccc
  border-radius: 4px
  box-sizing: border-box
  box-shadow: 0 2px 1px rgba(0,0,0,.07)
  background: #fff
  transition: all .4s ease-in-out
  opacity: 0
  visibility: hidden
  pointer-events: none
  transform: translateY(-15px)

.custom-select.opened .custom-options
  opacity: 1
  visibility: visible
  pointer-events: all
  transform: translateY(0)

.custom-options:before
  position: absolute
  display: block
  content: ''
  bottom: 100% 
  right: 15px
  width: 7px 
  height: 7px
  margin-bottom: -4px
  border-top: 1px solid #b5b5b5
  border-left: 1px solid #b5b5b5
  background: #fff
  transform: rotate(45deg)
  transition: all .4s ease-in-out

.option-hover:before
  background: #f9f9f9

.custom-option
  position: relative
  display: block
  padding: 0 15px
  border-bottom: 1px solid #ccc
  font-size: 15px
  text-align: left
  color: #797979
  line-height: 39px
  height: 39px
  cursor: pointer
  transition: all .4s ease-in-out

.custom-option:first-of-type
  border-radius: 4px 4px 0 0

.custom-option:last-of-type
  border-bottom: 0
  border-radius: 0 0 4px 4px

.custom-option:hover,
.custom-option.selection
  background: #f1f1f1
// CUSTOM SELECT end