在Safari中选择下拉文本对齐中心？

Question

选择下拉css

display: block;
height: 60px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
min-height: 60px;
text-align: center;

选项文本在firefox浏览器中居中，但不在safari中， 是否有任何解决方案可以在safari浏览器中将文本对齐到中心？

Answer 1

您可以使用顶部和底部填充并移除高度以对齐中间的文本。

padding: 30px;

Answer 2

添加填充并移除高度。例如，这里是您提供的代码的更新：

display: block;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

<强>更新

不幸的是，填充在Safari（iPhone）中可能无效。在这种情况下，请尝试使用文本缩进而不是填充。并添加下拉菜单宽度的文本缩进。请查看您提供的代码的更新：

display: block;
height: 60px;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
min-height: 60px;
width: 220px; /* width of 200px plus the 20px for the text indent */
text-indent: 20px;

Answer 3

如果您不顾一切，请使用此codepen Crossbrowser Select

$(document).ready(() => {
    $('.crossbrowser-select').on('click', crossbrowserSelectOnClickEvent);
    $('.crossbrowser-select').on('mouseWheelDown', crossbrowserSelectOnMouseWheelDownEvent);
    $('.crossbrowser-select').on('mouseWheelUp', crossbrowserSelectOnMouseWheelUpEvent());
    $('.crossbrowser-select > .option').on('click', crossbrowserSelectItemOnClickEvent);
    $('.crossbrowser-select').focusout('click', crossbrowserSelectOnFocusOutEvent);

    //Firefox
    $('.crossbrowser-select').bind('DOMMouseScroll', function(e){
        if (e.originalEvent.detail > 0) {
            //scroll down
            chooseNextItem($(this));
        } else {
            //scroll up
            choosePreviousItem($(this));
        }
        //prevent page fom scrolling
        return false;
    });
    //IE, Opera, Safari
    $('.crossbrowser-select').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta < 0) {
            //scroll down
            chooseNextItem($(this));
        }else {
            //scroll up
            choosePreviousItem($(this));
        }

        //prevent page fom scrolling
        return false;
    });

    $('.crossbrowser-select').keyup(function(event) {
        if (event.keyCode === 32) { //Enter
            event.preventDefault();
            toggleSelect($(this));
        }
        if (event.keyCode === 38) { //Up
            event.preventDefault();
            choosePreviousItem($(this));
        }
        if (event.keyCode === 40) { //Down
            event.preventDefault();
            chooseNextItem($(this));
        }
    });
});

/* METHODS ************************************************************************************************************/

function toggleSelect(select) {
    if (select.hasClass('expanded')) {
        select.toggleClass('expanded');
        select.children('.option').removeClass('shown');
    } else {
        select.toggleClass('expanded');
        select.children('.option').each(function () {
            const item = $(this);
            const select = item.parent();
            if (item.attr('value') !== select.attr('value')) {
                item.toggleClass('shown');
            }
        });
    }
}

function collapseSelect(select) {
    select.removeClass('expanded');
    select.children('.option').each(function () {
        $(this).removeClass('shown');
    });
}

function chooseNextItem(select) {
    collapseSelect(select);
    if (select.attr('value') !== '') {
        const selectedItem = select.children('div[value=\'' + select.attr('value') + '\']');
        const nextSibling = selectedItem.next('.option');
        if (nextSibling) {
            select.attr('value', nextSibling.attr('value'));
            select.children('.visual-option').html(nextSibling.html());
        }
    } else {
        selectFirstItem(select);
    }
}

function choosePreviousItem(select) {
    collapseSelect(select);
    if (select.attr('value') !== '') {
        const selectedItem = select.children('div[value=\'' + select.attr('value') + '\']');
        const prevSibling = selectedItem.prev('.option');
        if (prevSibling) {
            select.attr('value', prevSibling.attr('value'));
            select.children('.visual-option').html(prevSibling.html());
        }
    } else {
        selectFirstItem(select);
    }
}

function chooseItem(item) {
    const select = item.parent('.crossbrowser-select');
    select.children('.visual-option').html(item.html());
    select.attr('value', (item.attr('value')));
}

function selectFirstItem(select) {
    const firstItem = select.children('.option').first();
    select.attr('value', firstItem.attr('value'));
    select.children('.visual-option').html(firstItem.html());
}

/* Events *************************************************************************************************************/

function crossbrowserSelectOnClickEvent() {
    toggleSelect($(this));
}

function crossbrowserSelectItemOnClickEvent() {
    chooseItem($(this));
}

function crossbrowserSelectOnMouseWheelDownEvent() {
    chooseNextItem($(this));
}

function crossbrowserSelectOnMouseWheelUpEvent() {
    choosePreviousItem($(this));
}

function crossbrowserSelectOnFocusOutEvent() {
    collapseSelect($(this));
}

.crossbrowser-select {
    text-align: center;
    cursor: pointer;
    border: 1px transparent solid;
    border-bottom: 1px solid #70ccd9;
    border-radius: 10px;
}
.crossbrowser-select.expanded {
    color: #70ccd9;
    border-top: 1px solid #70ccd9;
}
.crossbrowser-select:hover,
.crossbrowser-select:focus,
.crossbrowser-select:active {
    outline: none;
    border: 1px solid white;
    background-color: transparent;
}

.crossbrowser-select > .option {
    display: none;
    color: white;
}
.crossbrowser-select > .option.shown {
    display: block;
}

<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body style="background-color: black; color: white; padding: 50px">
  <div class="col-4 text-center">
    <div style="margin-bottom: 20px">Previous random element</div>
    
    <div value="" class="crossbrowser-select"  tabindex="0">
      <div class="visual-option">Select Item from list</div>
      <div class="option" value="1option">Option1</div>
      <div class="option" value="2option">Option2</div>
      <div class="option" value="3option">Option3</div>
    </div>
    
    <div style="margin-top: 20px">Next random element</div>
  </div>
  
  <script src="https://code.jquery.com/jquery-1.12.3.js" ></script>
</body>

</html>