J'ai une liste déroulante qui contient un texte d'espace réservé. Dans d'autres navigateurs, j'ai pu centrer ce texte d'espace réservé, mais dans Chrome, text-align: center
Voici le HTML pour le 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>
Alors, est-ce qu'il me manque quelque chose? Toutes mes autres entrées de texte ont leurs espaces réservés alignés au centre et les boîtes déroulantes sont alignées au centre sur d'autres navigateurs comme Firefox.
this est ce que vous essayez de faire?
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>
Ceci est partiellement pris en charge par les navigateurs (problèmes, au moins, dans Edge et Safari)