使用Safari中CSS的html居中文本

Question

[我正在尝试使用CSS在HTML select表单内将文本居中，它在除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

如果需要，可以使用select2库为选择的元素设置样式。

$('select').select2();

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

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

Answer 2

我认为左侧填充设置为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;
}