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)