Discussion :

[dominos]

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,

[danielhagnoul]

Je ne vois pas le problème :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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

[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 !

[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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
select {
  text-align:right;
}

[dominos]

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.



Si vous avez d'autres idées ...

[Invité]

Si tu avais du code.....

[dominos]

Si tu avais du code.....

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[NoSmoking]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<select>
  <option value="1">&nbsp;&nbsp;1</option>
  <option value="20">&nbsp;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 ».

[dominos]

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

Merci pour ces idées.