Centered text in html select with CSS in Safari

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

if you want to include safari, maybe a text-indent could work. (text-align-last) do not seem to work yet here (safari/IE) — G-Cyrillus, Feb 12 '20 at 11:19
Does this answer your question? [Is it possible to center text in select box?](https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) — Awais, Feb 12 '20 at 11:21

score 0 · Answer 1 · answered Feb 12 '20 at 11:25

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;
}

I tried, this just adds padding on the left, it doesn't actually center text. — Artemis, Feb 12 '20 at 11:29

Centered text in html select with CSS in Safari

1 Answers1