Comment puis-je centrer le texte dans une zone de sélection (une solution spécifique à Chrome) ?

Alignement du texte pour la zone de sélection : une solution partielle réservée à Chrome uniquement

Vous souhaiterez peut-être centrer le texte dans une zone de sélection pour des raisons esthétiques ou pour améliorer l'accessibilité. Cependant, l'ajout manuel d'un attribut text-align à l'élément select en CSS peut ne pas fonctionner comme prévu.

Tentatives initiales

Une approche courante est illustrée dans le violon fourni :

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="">(please select a state)</option>
<option>

Copier après la connexion

select .lt { text-align: center ; ><br>

Malheureusement, cette technique est inefficace.

Solution spécifique à Chrome

Bien qu'il s'agisse d'une solution CSS uniquement car l'alignement complet du texte peut ne pas être possible sur tous les navigateurs, il existe une solution partielle pour Chrome :

select { width: 400px; texte-align-last:center; }<br>

Cette méthode centre l'option sélectionnée dans la liste déroulante elle-même mais pas les options non sélectionnées. C'est un pas de plus vers un alignement complet mais aussi une limitation dont il faut être conscient.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!