Compatibilité text-align="right" et <select>

Version imprimable

11/10/2017, 19h04
dominos

Compatibilité text-align="right" et <select>

Bonjour,

Après plusieurs tests et recherches sans résultat ...

Savez-vous s'il est possible d'aligner le texte d'un select à droite, compatible : Chrome/Safari/IE/FF/Opéra.
j'ai essayé text-right de bootsraps, direction="rtl" et text-align="right" de CSS ...

Quelques exemples trouvés sur internet ne semblent pas tenir compte des problèmes de compatibilité.

Merci d'avance pour votre réponse,

:salive:

:salut:

Je ne vois pas le problème :

Code:

1
2
3
4
5
6
7
<select lang="fr" dir="rtl">
	<option value="1">1</option>
	<option value="20">20</option>
	<option value="30" selected>300</option>
	<option value="400">400</option>
	<option value="500">500</option>
</select>

12/10/2017, 07h39
dominos

Vous êtes sûr d'avoir testé ce code ?

Chrome + FF : Carret inversé
Safari : Carret inversé + align = left
IE : Absence du Carret
Opéra : Fonctionne

:)
12/10/2017, 10h31
danielhagnoul

Comme d'habitude, j'ai testé avec les navigateurs dignes de ce nom (non obsolètes), à savoir Chrome, Firefox et Edge.

La flèche inversée c'est logique avec un alignement à droite !
12/10/2017, 11h25
Invité
Bonjour,

il faut savoir que l'aspect des select change d'un navigateur à l'autre (ils ont leurs propres styles)...

Et sauf erreur de ma part (et/ou mise à jour), il est difficile de styler les <option>, à part pour color et background-color.

Par contre, on peut styler le <select> (exemple ici).

On peut mettre facilement le texte à droite pour le select (mais pas les options) :
Code:

1 2 3 select { text-align:right; }
12/10/2017, 11h50
dominos

1 pièce(s) jointe(s)

Merci mais le style a déjà été revisité, néanmoins certaines listes affichants une incrémentation, d'où la nécessité de placer les unités à droite.

Pièce jointe 318852

Si vous avez d'autres idées ...
12/10/2017, 12h01
Invité

Si tu avais du code..... :roll:

Citation:

Envoyé par jreaux62

Si tu avais du code..... :roll:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Texte à droite dans un select */
select.text-right { 
	/* Compatibilité :
	   ---------------
	   IE : Ok
           Chrome/FF/Opéra : Décale la scrollbar à gauche
           Safari : align = left
   	*/
   	/* direction: rtl; */
}
option.text-right {
	/* Compatibilité : 
	   ---------------
	   Chrome/FF/Opéra : Ok
           Safari/IE : align = left
   	*/
    direction: rtl;
}

Code:

1
2
3
4
5
6
7
8
9
<select class="form-control text-right">
  <?php
    for($i = 1; $i <= 15; $i++) {
  ?>  
   <option value="<?php echo $i; ?>" class="text-right"><?php echo $i; ?></option>
  <?php 
   }            
  ?>
</select>

Chrome/FF/Opéra : Fonctionnel
Safari/IE : align = left

Nota : text-right est à la base une classe de bootstrap 3.

Bonjour,
avec IE c'est pas gagné du tout sauf à passer par un <select> entièrement customisé.

Tu peux toujours passer par des espaces insécables
Code:

1 2 3 4 5 6 7 <select> <option value="1">  1</option> <option value="20"> 20</option> <option value="30">300</option> <option value="400">400</option> <option value="500">500</option> </select>
il te faudra néanmoins mettre une police « monospace ».

19/10/2017, 11h58
dominos

Peut-être ce problème sera t-il réglé dans une version ultérieure de CSS ...

Merci pour ces idées.