text-align：选择中心的占位符文本

我有一个包含占位符文本的下拉列表。在其他浏览器，我已经能够居中此占位符文本，但在Chrome中，文本对齐：中心text-align：选择中心的占位符文本

下面是选择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）中的中心对齐。

来源

2016-02-26 DigM

你的CSS类不是在您所提供的HTML代码的支持。 –

_“我有一个包含占位符文本的下拉列表” - - 不在您显示的代码中。 – CBroe

可能[重复]（http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box）。 – hungerstar

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

这部分是通过浏览器（的问题，至少在边缘和Safari）

来源

2016-02-26 15:19:05

最好的解决方案。谢谢 –

无法在Safari 10.1中工作 – BigJ

@BigJ遗憾的是尚未在几个浏览器中支持:(http://caniuse.com/#search=text-align-last _I没有MAC地址检查出来_ –

text-align：选择中心的占位符文本

回答

相关问题