在 Safari 中使用 CSS 选择 HTML 中的居中文本

Question

我正在尝试使用 CSS 使 HTML 选择表单中的文本居中，它适用于除 Safari 之外的所有浏览器，我尝试使用 text-align: -webkit-center; 但它不起作用。

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

其他

Answer 1

我认为左侧填充设置为 0。请检查此代码。

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