web-dev-qa-db-fra.com

alignement du texte: centre le texte de l'espace réservé dans la sélection

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.

htmlcsshtml5drop-down-menuplaceholder
9
DigM

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)

52
G-Cyr