Select drop down text-align center in safari?

Question

select drop down css

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

option text is centered in firefox browser,but not in safari, Is there any solution to get text aligned in center in safari browser?

Answer 1

Add padding and remove the height. For example here is an update of the code you have supplied:

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

UPDATE

Unfortunately padding may not work in Safari (iPhone). In this case try using text indent instead of padding. And add the text indent of the width of your drop down menu. Please see an update of the code you provided:

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 2

You could use top and bottom padding and remove height to align the text in the middle.

padding: 30px;

Answer 3

If you are desperate, use this one 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>