文本对齐:居中占位符文本

Question

我有一个包含占位符文本的下拉列表。在其他浏览器中，我可以将此占位符文本居中，但在Chrome中，文本对齐: center

以下是Select的HTML：

​

.bookingform::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #FFF;
  opacity: 1;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  opacity: 1;
  text-align: center;
}
.bookingform:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}
.bookingform:placeholder-shown {
  /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #FFF;
  font-size: 18px;
  font-family: "Raleway";
  text-align: center;
}

<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <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>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

​

那么我是不是遗漏了什么呢？我的所有其他文本输入都将其占位符与中心对齐，下拉框在其他浏览器(如Firefox )上与中心对齐。

Answer 1

你想要做的是this吗？

​

select {
  text-align: center;
  text-align-last: center;
  /* webkit*/
}
option {
  text-align: left;
  /* reset to left*/
}

<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <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>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>
<select name="number-of-adults" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="ADULTS*">ADULTS*</option>
  <option value="1" selected="true">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

​

浏览器部分支持(问题，至少在Edge和Safari中)