文本对齐：选择中的中心占位符文本 [英] text-align: center placeholder text in select

问题描述

我有一个包含占位符文本的下拉列表。在其他浏览器中，我可以将此占位符文本居中，但在Chrome中，text-align：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至18 * / color：#FFF;不透明度：1; font-size：18px; font-family：Raleway; text-align：center;} bookingform ::  -  moz-placeholder {/ * Mozilla Firefox 19+ * / color：#FFF; font-size：18px; font-family：Raleway;不透明度：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.c​​sswg.org/selectors-4/#placeholder）* / color：#FFF; font-size：18px; font-family：Raleway; text-align：center;}  < select name = number-of-adultsclass =wpcf7-form-control wpcf7-selectaria-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等其他浏览器的中心对齐。

是这你正在尝试做什么？

select {text-align：center; text-align-last：center; / * webkit * /}选项{text-align：left; / *重置为左侧* /}

< select name =成人数class =wpcf7-form-control wpcf7-selectaria-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 =成人数量class =wpcf7-form-control wpcf7-selectaria-invalid =false > < option value =ADULTS *> ADULTS *< / option> < option value =1selected =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中存在问题）

I have a drop down list which has placeholder text. In other browsers, I have been able to center this placeholder text but in Chrome, text-align:center

Here is the HTML for the Select:

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

So is there something that I am missing? All of my other text inputs have their placeholders aligned to the center and the drop down boxes are aligned to the center on other browsers like Firefox.

解决方案

Is this what you are trying to do ?

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>

This is partially supported by browsers (issues, at least, in Edge and Safari)

这篇关于文本对齐：选择中的中心占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！