Centered text in html select with CSS in Safari - css

Question

I'm trying to center the text inside an HTML select form with CSS, it works on every browser but Safari, I tried with text-align: -webkit-center; but it doesn't work.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
label.cw-select {
display: inline-block;
position: relative;
}
.cw-select select {
background: #4d4d4d;
border-radius: 0.3rem;
border: 1px solid #212121;
color: white;
display: inline-block;
height: 30px;
line-height: 1.2;
margin: 0;
min-width: 48px;
outline: none;
padding: 4px 20px 3px 0px;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
}
.cw-select:after {
background: #1d1d1d;
border-top-right-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
bottom: 0;
color: white;
content: "▼";
font-size: 60%;
line-height: 30px;
padding: 0 6px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
}
<label class="cw-select">
<select name="numberOfPlayers" form="numberOfPlayers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
Safari
Others

Answer 1

I think the left padding is set to 0. Can you please check this code.
.cw-select select {
background: #4d4d4d;
border-radius: 0.3rem;
border: 1px solid #212121;
color: white;
display: inline-block;
height: 30px;
line-height: 1.2;
margin: 0;
min-width: 48px;
outline: none;
padding: 4px 20px 3px 10px; // instead of 4px 20px 3px 0;
text-align: center;
text-align: -webkit-center;
text-align: -moz-center;
}