Select Drop Down Text-Align Center in Safari

Select drop down text-align center in safari?

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;

text-align is not working on safari <select>

For Safari

text-align: -webkit-center;

However, the best way to analyze the working of HTML/CSS is the Web-Inspector in Safari.

Sample Image
More >>

Safari select / dropdown options are not aligned to input tag

My attempt: I wrapped the select in a container with the rounded border and I moved the nested select to the right. Then I adjusted the left padding of the select so to have the first option aligned as in your example

I also used @supports to apply this new style on webkit-only browsers.

 .select-wrapper {      
   position: relative;
   border: 1px currentColor solid;      
   border-radius: 1rem;
   width: 50%;
   overflow-x: hidden;
   cursor: pointer;
   box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px 1px;
}

.select-wrapper select {
   border: 0;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
   box-sizing: border-box;
}

.select-wrapper select:active, 
.select-wrapper select:focus {
   outline: none;
}

/* Webkit only style */

@supports (-webkit-font-smoothing: auto) {

 .select-wrapper::after {
   content: "";
   position: absolute;
   z-index: 1;
   top: calc(50% - 5px);
   right: .5rem;
   width: 10px;
   height: 10px;
   pointer-events: none;
   background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
   background-size: 100%, 100%;
   background-repeat: no-repeat, repeat;
   background-position: center, 0px 0px;
 }
  
 .select-wrapper select {
   padding: .375rem 0;
   width: calc(100% - 4px);
   transform: translateX(13px); /* adjust as you prefer */
 }
}


/* Non-Webkit style */

@supports (not (-webkit-font-smoothing: auto)) {
   
  .select-wrapper select {
   padding: .375rem .75rem;
   background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);
   background-size: 0.85em, 100%;
   background-repeat: no-repeat, repeat;
   background-position: right 0.7em top 50%, 0px 0px;
  }
}

<div class="select-wrapper">
  <select >
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

Safari browser: set <option> text align in <select> tag right

Safari having the issue(bug) with the <Select>option for the text-align:right with the direction:rtl property. Please check following link for bug report:--

-->https://bugs.webkit.org/show_bug.cgi?format=multiple&id=19785

beside that I also find so many forums which reported this issue check some of then :--

-->http://csscreator.com/node/32981

-->http://css-tricks.com/forums/topic/aligning-select-box-options-to-the-right-in-safari/

-->http://hintsforums.macworld.com/showthread.php?t=107502

You can be do google for more information about this bug,

In the safari road maps(Implementations) I didn't hear any solution for this bug/issue.

Is it possible to center text in select box?

I'm afraid this isn't possible with plain CSS, and won't be possible to make completely cross-browser compatible.

However, using a jQuery plugin, you could style the dropdown:

https://www.filamentgroup.com/lab/jquery-ui-selectmenu-an-aria-accessible-plugin-for-styling-a-html-select.html

This plugin hides the select element, and creates span elements etc on the fly to display a custom drop down list style. I'm quite confident you'd be able to change the styles on the spans etc to center align the items.

Select Drop Down Text-Align Center in Safari