選擇選項後隱藏自定義選擇陰影 - 僅限Safari瀏覽器

Question

我有這個自定義選擇，當它打開它的選項列表時有一個陰影，但是當我選擇一個選項並且列表關閉時陰影不會隱藏。這個問題只發生在Safari上。下面是一個示例：

編輯：只有在頁面上有其他輸入字段時，纔會出現此問題。

(function($) { 
 
    $.fn.niceSelect = function(method) { 
 

 
    // Methods 
 
    if (typeof method === 'string') { 
 
     if (method === 'update') { 
 
     this.each(function() { 
 
      var $select = $(this); 
 
      var $dropdown = $(this).next('.nice-select'); 
 
      var open = $dropdown.hasClass('open'); 
 
      var focused = $select.parents('.form-group-select').hasClass('focused'); 
 

 
      if ($dropdown.length) { 
 
      $dropdown.remove(); 
 
      create_nice_select($select); 
 

 
      if (open) { 
 
       $select.next().trigger('click'); 
 
      } else if (focused) { 
 
       $select.parents('.form-group-select').toggleClass('focused'); 
 
      } 
 
      } 
 
     }); 
 
     } else if (method === 'destroy') { 
 
     this.each(function() { 
 
      var $select = $(this); 
 
      var $dropdown = $(this).next('.nice-select'); 
 

 
      if ($dropdown.length) { 
 
      $dropdown.remove(); 
 
      $select.css('display', ''); 
 
      } 
 
     }); 
 
     if ($('.nice-select').length === 0) { 
 
      $(document).off('.nice_select'); 
 
     } 
 
     } else { 
 
     console.log('Method "' + method + '" does not exist.'); 
 
     } 
 
     return this; 
 
    } 
 

 
    // Hide native select 
 
    this.hide(); 
 

 
    // Create custom markup 
 
    this.each(function() { 
 
     var $select = $(this); 
 

 
     if (!$select.next().hasClass('nice-select')) { 
 
     create_nice_select($select); 
 
     } 
 
    }); 
 
    function create_nice_select($select) { 
 
     $select.after($('<div></div>') 
 
     .addClass('nice-select') 
 
     .addClass($select.attr('class') || '') 
 
     .addClass($select.attr('disabled') ? 'disabled' : '') 
 
     .attr('tabindex', $select.attr('disabled') ? null : '0') 
 
     .html('<span class="current"></span><ul class="list"></ul>') 
 
    ); 
 

 
     var $dropdown = $select.next(); 
 
     var $options = $select.find('option'); 
 
     var $optgroups = $select.find('optgroup'); 
 
     var $selected = $select.find('option:selected'); 
 

 
     $dropdown.find('.current').html($selected.data('display') || $selected.text()); 
 

 
     $options.each(function() { 
 
     var $option = $(this); 
 
     var display = $option.data('display'); 
 
     var group = $option.parents('optgroup').data('i'); 
 

 
     $dropdown.find('ul').append($('<li></li>') 
 
      .attr('data-value', $option.val()) 
 
      .attr('data-display', (display || null)) 
 
      .attr('data-group', (group || null)) 
 
      .addClass('option' + 
 
      ($option.is(':selected') ? ' selected' : '') + 
 
      ($option.is(':disabled') ? ' disabled' : '')) 
 
      .html($option.text()) 
 
     ); 
 
     }); 
 
     $optgroups.each(function(i, g) { 
 
     label = $(g).attr('label'); 
 
     $dropdown.find('ul li').filter(function() { 
 
      return $(this).data('group') === $(g).data('i'); 
 
      }) 
 
      .wrapAll('<div class="optgroup"/>') 
 
      .parent() 
 
      .prepend('<span class="label">' + label + '</span>'); 
 
     }); 
 
    } 
 

 
    /* Event listeners */ 
 
    // Unbind existing events in case that the plugin has been initialized before 
 
    $(document).off('.nice_select'); 
 

 
    // Open/close 
 
    $(document).on('click.nice_select', '.nice-select', function() { 
 
     var $dropdown = $(this); 
 

 
     $('.nice-select').not($dropdown).removeClass('open'); 
 
     $dropdown.toggleClass('open'); 
 

 
     if ($dropdown.hasClass('open')) { 
 
     $dropdown.find('.option'); 
 
     $dropdown.find('.focus').removeClass('focus'); 
 
     $dropdown.find('.selected').addClass('focus'); 
 
     } else { 
 
     $dropdown.focus(); 
 
     } 
 
    }); 
 

 
    // Close when clicking outside 
 
    $(document).on('click.nice_select', function(event) { 
 

 
     if ($(event.target).closest('.nice-select').length === 0) { 
 
     $('.nice-select').removeClass('open').find('.option'); 
 
     } 
 
    }); 
 

 
    // Animation loading a page 
 
    $('select').on('blur', function(e) { 
 
     $(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== '')); 
 
    }).trigger('blur'); 
 

 
    // Option click 
 
    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function() { 
 

 
     var $option = $(this); 
 
     var $dropdown = $option.closest('.nice-select'); 
 

 
     $dropdown.find('.selected').removeClass('selected'); 
 
     $option.addClass('selected'); 
 

 
     var text = $option.data('display') || $option.text(); 
 
     $dropdown.find('.current').text(text); 
 

 
     $dropdown.prev('select').val($option.data('value')).trigger('change'); 
 

 
     // Animation 
 
     $(this).parents('.form-group-select').toggleClass('focused', ($option.data('value') !== '')); 
 
    }); 
 

 
    // Keyboard events 
 
    $(document).on('keydown.nice_select', '.nice-select', function(event) { 
 

 
     var $dropdown = $(this); 
 
     var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected')); 
 

 
     // Space or Enter 
 
     if (event.keyCode === 32 || event.keyCode === 13) { 
 
     if ($dropdown.hasClass('open')) { 
 
      $focused_option.trigger('click'); 
 
     } else { 
 
      $dropdown.trigger('click'); 
 
     } 
 
     return false; 
 

 
     // Down 
 
     } else if (event.keyCode === 40) { 
 
     if (!$dropdown.hasClass('open')) { 
 
      $dropdown.trigger('click'); 
 
     } else { 
 
      var $all_options = $dropdown.find(".option:not(.disabled)"); 
 
      var $next = $all_options.eq($all_options.index($focused_option) + 1); 
 
      if ($next.length > 0) { 
 
      $dropdown.find('.focus').removeClass('focus'); 
 
      $next.addClass('focus'); 
 
      } 
 
     } 
 
     return false; 
 

 
     // Up 
 
     } else if (event.keyCode === 38) { 
 
     if (!$dropdown.hasClass('open')) { 
 
      $dropdown.trigger('click'); 
 
     } else { 
 
      var $all_options = $dropdown.find(".option:not(.disabled)"); 
 
      var $prev = $all_options.eq($all_options.index($focused_option) - 1); 
 
      if ($prev.length > 0) { 
 
      $dropdown.find('.focus').removeClass('focus'); 
 
      $prev.addClass('focus'); 
 
      } 
 
     } 
 
     return false; 
 

 
     // Esc 
 
     } else if (event.keyCode === 27) { 
 
     if ($dropdown.hasClass('open')) { 
 
      $dropdown.trigger('click'); 
 
     } 
 

 
     // Tab 
 
     } else if (event.keyCode === 9) { 
 
     if ($dropdown.hasClass('open')) { 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    return this; 
 
    }; 
 
}(jQuery)); 
 
$('select').niceSelect();

.nice-select .list { 
 
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
} 
 

 
.form-group { 
 
    margin-top: 20px; 
 
    position: relative; 
 
    display: flex; 
 
    height: 45px; 
 
    float: left; 
 
} 
 

 
.form-group::after { 
 
    width: 100%; 
 
    height: 2px; 
 
    background: #0091FF; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    transform: scaleX(0); 
 
    transition: ease-in-out 240ms all; 
 
} 
 

 
.form-group.animate::after { 
 
    transform: scaleX(1); 
 
} 
 

 
.control-label { 
 
    pointer-events: none; 
 
    position: absolute; 
 
    transform: translate3d(5px, 22px, 0) scale(1); 
 
    transform-origin: left top; 
 
    transition: 240ms; 
 
} 
 

 
.form-group.focused .control-label, 
 
.form-group-select.focused .control-label { 
 
    transform: scale(0.75); 
 
} 
 

 
.form_campos { 
 
    height: 31px; 
 
    width: 100%; 
 
    color: #484848; 
 
    align-self: flex-end; 
 
    padding: 5px; 
 
    outline: none; 
 
    border: 0 solid #484848; 
 
    border-bottom-width: 1px; 
 
    background: transparent; 
 
    border-radius: 0; 
 
} 
 

 
.form_campos:hover, 
 
.form_campos:focus { 
 
    border-color: #0091FF; 
 
} 
 

 
.form_disabled, 
 
.form_disabled:hover, 
 
.form_disabled:focus { 
 
    border-color: #D7D7D7; 
 
} 
 

 

 
/*====================================================================================================================*/ 
 

 

 
/* Select */ 
 

 

 
/*====================================================================================================================*/ 
 

 
.form-group-select.focused .control-label { 
 
    transform: scale(0.75); 
 
} 
 

 
.form-group-select { 
 
    width: 100%; 
 
    margin-top: 20px; 
 
    position: relative; 
 
    height: 45px; 
 
    float: left; 
 
} 
 

 
.nice-select:before { 
 
    width: 100%; 
 
    height: 1px; 
 
    background: #0091FF; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    content: ''; 
 
    transform: scaleX(0); 
 
    transition: ease-in-out 240ms all; 
 
} 
 

 
.nice-select.open::before { 
 
    transform: scaleX(1); 
 
} 
 

 
.nice-select { 
 
    -webkit-tap-highlight-color: transparent; 
 
    box-sizing: border-box; 
 
    clear: both; 
 
    cursor: pointer; 
 
    display: block; 
 
    height: 45px; 
 
    line-height: 45px; 
 
    outline: none; 
 
    position: relative; 
 
    text-align: left !important; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    border: 0 solid #484848; 
 
    border-bottom-width: 1px; 
 
    padding-top: 7px; 
 
    overflow: hidden; 
 
    box-shadow: none; 
 
} 
 

 
.nice-select.open { 
 
    overflow: visible; 
 
} 
 

 
.nice-select span.current { 
 
    margin-left: 5px; 
 
} 
 

 
.optgroup span { 
 
    padding-left: 10px; 
 
    font-style: italic; 
 
} 
 

 
.nice-select:hover, 
 
.nice-select:focus { 
 
    border-color: #0091FF; 
 
} 
 

 
.nice-select:after { 
 
    border-bottom: 2px solid #484848; 
 
    border-right: 2px solid #484848; 
 
    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 0.15s ease-in-out; 
 
    transition: all 0.15s ease-in-out; 
 
    width: 5px; 
 
} 
 

 
.nice-select.open:after { 
 
    -webkit-transform: rotate(-135deg); 
 
    -ms-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
} 
 

 
.nice-select.open .list { 
 
    color: #484848; 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
    -webkit-transform: scale(1) translateY(0); 
 
    -ms-transform: scale(1) translateY(0); 
 
    transform: scale(1) translateY(0); 
 
} 
 

 
.nice-select.disabled { 
 
    border-color: #ededed; 
 
    color: #999; 
 
    pointer-events: none; 
 
} 
 

 
.nice-select.disabled:after { 
 
    border-color: #cccccc; 
 
} 
 

 
.nice-select .list { 
 
    background-color: #FFF; 
 
    border-radius: 4px; 
 
    box-sizing: border-box; 
 
    margin-top: 4px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    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(0.75) translateY(-21px); 
 
    -ms-transform: scale(0.75) translateY(-21px); 
 
    transform: scale(0.75) translateY(-21px); 
 
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; 
 
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; 
 
    width: 100%; 
 
    z-index: 99; 
 
} 
 

 
.nice-select .list:before { 
 
    content: ''; 
 
    display: block; 
 
    height: 7px; 
 
    border-radius: 4px 4px 0px 0px; 
 
} 
 

 
.nice-select .list:after { 
 
    content: ''; 
 
    display: block; 
 
    height: 7px; 
 
    border-radius: 0px 0px 4px 4px; 
 
} 
 

 
.nice-select .option { 
 
    cursor: pointer; 
 
    line-height: 40px; 
 
    list-style: none; 
 
    min-height: 40px; 
 
    outline: none; 
 
    padding-left: 18px; 
 
    padding-right: 29px; 
 
    text-align: left; 
 
    border-left: 7px solid #FFF; 
 
} 
 

 
.nice-select .option:hover, 
 
.nice-select .focus { 
 
    background: #EEEEEE; 
 
    border-left: 7px solid #F65314; 
 
} 
 

 
.nice-select .list:hover .option:not(:hover) { 
 
    background-color: transparent !important; 
 
    border-left: 7px solid transparent !important; 
 
} 
 

 
.nice-select .option.selected { 
 
    font-weight: bold; 
 
} 
 

 
.nice-select .option.disabled { 
 
    background-color: transparent; 
 
    color: #999; 
 
    cursor: default; 
 
} 
 

 
.no-csspointerevents .nice-select .list { 
 
    display: none; 
 
} 
 

 
.no-csspointerevents .nice-select.open .list { 
 
    display: block; 
 
} 
 

 

 
/*====================================================================================================================*/ 
 

 

 
/* Grid */ 
 

 

 
/*====================================================================================================================*/ 
 

 
.row { 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
} 
 

 
.row, 
 
.column { 
 
    box-sizing: border-box; 
 
} 
 

 
.row:before, 
 
.row:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
.row:after { 
 
    clear: both; 
 
} 
 

 
.column { 
 
    float: left; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.row>.column:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
.column+.column { 
 
    margin-left: 1.6%; 
 
} 
 

 
.column-1 { 
 
    width: 6.86666666667%; 
 
} 
 

 
.column-2 { 
 
    width: 15.3333333333%; 
 
} 
 

 
.column-3 { 
 
    width: 23.8%; 
 
} 
 

 
.column-4 { 
 
    width: 32.2666666667%; 
 
} 
 

 
.column-5 { 
 
    width: 40.7333333333%; 
 
} 
 

 
.column-6 { 
 
    width: 49.2%; 
 
} 
 

 
.column-7 { 
 
    width: 57.6666666667%; 
 
} 
 

 
.column-8 { 
 
    width: 66.1333333333%; 
 
} 
 

 
.column-9 { 
 
    width: 74.6%; 
 
} 
 

 
.column-10 { 
 
    width: 83.0666666667%; 
 
} 
 

 
.column-11 { 
 
    width: 91.5333333333%; 
 
} 
 

 
.column-12 { 
 
    width: 100%; 
 
    margin-left: 0 !important; 
 
} 
 

 

 
/* Mobile */ 
 

 
@media only screen and (max-width: 900px) { 
 
    .column-1, 
 
    .column-2, 
 
    .column-3, 
 
    .column-4, 
 
    .column-5, 
 
    .column-6, 
 
    .column-7, 
 
    .column-8, 
 
    .column-9, 
 
    .column-10, 
 
    .column-11, 
 
    .column-12 { 
 
    width: auto; 
 
    float: none; 
 
    } 
 
    .column+.column { 
 
    margin-left: 0; 
 
    } 
 
    .row:last-child .column:last-child { 
 
    margin-bottom: 12px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Grid --> 
 
<div class="row"> 
 
<div class='form-group column column-8'> 
 
    <label class='control-label' for='nome'>NAME</label> 
 
    <input type='text' class='form_campos autofocus' id='nome' name='nome'> 
 
    </div> 
 
    <div class='form-group-select column column-4'> 
 
    <label class='control-label'>CHOOSE</label> 
 
    <select name='choose'> 
 
        <option value="s">YES</option> 
 
        <option value="n">NO</option> 
 
       </select> 
 
    </div> 
 
</div>

Answer 1

看起來好像有在Safari中的錯誤。 通過擺弄周圍，我發現，如果我從你的CSS-類中刪除

overflow: hidden; 

「.nice選」，似乎工作。

請試試看。

編輯： 嘗試增加

display: none; 

爲 「.nice選.LIST」 和

display: block; 

爲 「.nice-select.open .LIST」