web-dev-qa-db-fra.com

text-align: à droite sur <select> ou <option>

Est-ce que quelqu'un sait s'il est possible d'aligner le texte à la droite d'un <select> ou plus précisément <option> élément dans WebKit. Il n’est pas nécessaire que ce soit une solution multi-navigateurs, y compris IE, mais c’est du pur CSS si cela est possible.

J'ai essayé les deux:

select { text-align: right } et option { text-align: right }, mais aucun ne semble avoir fonctionné dans WebKit (Chrome, Safari ou Mobile Safari).

Toute aide reçue avec gratitude!

htmlcsswebkit
69
BenM

Vous pouvez essayer d'utiliser l'attribut "dir", mais je ne suis pas sûr que cela produirait l'effet souhaité?

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

Démo ici: http://jsfiddle.net/fparent/YSJU7/

68
Frank Parent

Le CSS suivant aligne à la fois la flèche et les options:

select { text-align-last: right; }
option { direction: rtl; }
<!-- example usage -->
Choose one: <select>
  <option>The first option</option>
  <option>A second, fairly long option</option>
  <option>Last</option>
</select>
54
Laiacy

La meilleure solution pour moi était de faire

select {
    direction: rtl;
}

et alors

option {
    direction: ltr;
}

encore. Il n'y a donc aucun changement dans la façon dont le texte est lu dans un lecteur d'écran ou aucun problème de formatage.

29
Martin Schilliger

Je pense que ce que tu veux c'est:

select {
  direction: rtl;
}

fiddled here: http://jsfiddle.net/neilheinrich/XS3yQ/

25
nheinrich

Je faisais face au même problème pour lequel je dois aligner la valeur d’espace réservé sélectionné à droite du champ de sélection et aligner également les options à droite, mais lorsque j’ai utilisé direction: rtl; sélectionner et appliquer un remplissage à droite pour sélectionner puis toutes les options se déplacent également vers la droite en remplissant le curseur, car je ne souhaite appliquer que le remplissage à un espace réservé sélectionné.

J'ai résolu le problème en utilisant le style suivant:

select:first-child{
  text-indent: 24%;
  direction: rtl;
  padding-right: 7px;
}

select option{
  direction: rtl;
}

Vous pouvez modifier le retrait du texte selon vos besoins. J'espère que cela vous aidera.

0
Ashish Sharma