Afficher 2 elts/option dans un tag <option>

Fermé

neuf Messages postés 4 Date d'inscription samedi 26 juillet 2003 Statut Membre Dernière intervention 5 septembre 2007 - 5 sept. 2007 à 11:05
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 5 sept. 2007 à 14:08

Salut,

je suis entrain de mettre en place une liste de selection de pays dans laquelle l' utilisateur pourra faire le choix d'un pays.je voudrais faire afficher dans cette liste le drapeau suivi du nom du pays grace au tag <OPTION>.

<select name="select_pays" id="select_pays">
<option value="benin"><img src="image/drapeau/20px-Flag_of_Benin.svg.png" /> Bénin</option>
<option value="burkina faco"><img src="image/drapeau/20px-Flag_of_Burkina_Faso.svg.png" /> Burkina faco</option>
</select>

Mais malheureusement c'est seulement le nom du pays qui s'affiche et nom le drapeau suivit du nom.

Quelqu'un aurait une solution pour moi?

Merci

A voir également:

Afficher 2 elts/option dans un tag <option>
Option booster free avis - Accueil - Guide opérateurs et forfaits
Windows 11 afficher d'autres options - Guide
Option de connexion microsoft - Guide
Nouveau tag ajouté - Forum Huawei

1 réponse

Réponse 1 / 1

Reivax962 Messages postés 3672 Date d'inscription jeudi 16 juin 2005 Statut Membre Dernière intervention 11 février 2021 1 011
5 sept. 2007 à 12:19

Bonjour,

Ce n'est pas un problème de nombre d'éléments dans le <option>, c'est le fait qu'un option n'accepte pas de code html. L'image est donc ignorée.

Par contre, il y a moyen de contourner le problème en utilisant des styles :

<select>
	<option value="1" style="background:url('image/drapeau/20px-Flag_of_Benin.svg.png') no-repeat; background-position:0 4px; padding-left:15px;">Bénin</option>
	<option value="2" style="background:url('image/drapeau/20px-Flag_of_Burkina_Faso.svg.png') no-repeat; background-position:0 4px; padding-left:15px;">Burkina Faso</option>
</select>

Les valeurs que j'ai données pour padding-left et background-position peuvent être changées pour améliorer l'affichage. J'éi testé avec de toutes petites images, donc j'ai dû abaisser l'image de 4px pour qu'elle soit centrée.

Voilà !

Xavier

PS : je n'ai pas testé ceci sur d'autres navigateurs que Firefox...

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
5 sept. 2007 à 14:08

+1

spécification HTML 4.01

<!ELEMENT OPTION - O (#PCDATA)         -- option sélectionnable -->
<!ATTLIST OPTION
  %attrs;                              -- %coreattrs, %i18n, %events --
  selected    (selected)     #IMPLIED
  disabled    (disabled)     #IMPLIED  -- indisponible dans ce contexte --
  label       %Text;         #IMPLIED  -- à utiliser dans les menus hiérarchiques --
  value       CDATA          #IMPLIED  -- le contenu de l'élément par défaut --
  >

le type CDATA représente une séquence de caractères, issus du jeu de caractère du document, qui peut inclure des entités de caractères.

Discussions similaires

Option de connexion désactivé

connection désactivée après trop de tentatives av mauvais md

Que signifie la pop up "nouveau tag ajouté" sur Huawei P8 Lite ?

Afficher toutes les lignes masquées excel

Impossible de déverrouiller mon ordinateur portable