28173 sujets

CSS et mise en forme, CSS3

[RESOLU]Leger pb de couleur de texte

Bonjour tout le monde,

j'ai réalisé un formulaire d'inscription sur mon site, parmis l'une des entrées, une liste déroulante..
je lui ai appliquée un style, le problême c'est que lorsqu'on passe le surseur dessus, le texte se met en blanc et donc on ne peut plus lire ce qui y est d'écrit.

le menu : 
<select name="0" class="grand_formulaire_inscription">
<option class="grand_formulaire_inscription_sans_bords">1</option>
<option class="grand_formulaire_inscription_sans_bords">2</option>
<option class="grand_formulaire_inscription_sans_bords" selected="selected" style="">3</option>
</select>


et les css : 

.grand_formulaire_inscription{
width:180px;
height:auto;
color:#3366CC;
cursor:pointer;
background:url('fond.png');
margin:0px 0px 0px 0px;
padding-left:3px;
padding-right:3px;
font-family:verdana;
font-size:13px;
border:1px solid #6666CC;
line-height:19px;}

.grand_formulaire_inscription_sans_bords{
width:180px;
height:auto;
color:#3366CC;
cursor:pointer;
background:url('fond.png');
margin:0px 0px 0px 0px;
padding:0px 3px 3px 3px;
font-family:verdana;
font-size:13px;
border:0px solid #6666CC;}


l'image utilisée est un dégradé a base de blanc (d'ou le pti blm de couleur)..
quelqu'un pourrait-il me dire ce que je dois faire donc pour contourner ce désagrément??
si je n'ai pas été clair, le problême est que quand je passe le curseur sur les différents choix proposés, le texte se change en blanc au lieu de rester en mauve et donc, sur un fond blanc ça le fait pas vraiment Smiley decu

merci d'avance!
Modifié par A-CesarX-V (17 Sep 2006 - 18:09)
j'ai la vague impression de m'être trompé de sujet Smiley sweatdrop
vraiment navré,
un modérateur pourrait-il déplacer ma requête dans "css et mise en forme"??
Smiley rolleyes
Bonjour A-CesarX-V,

J'ai créé une page de test avec le code que tu fournis. Suivant les navigateurs, j'obtiens une liste déroulante avec un texte bleu sur fond blanc qui, au survol, devient :
- blanc sur fond bleu marine (IE 6) ;
- blanc sur fond bleu roi (Opera) ;
- blanc sur fond bleu je sais pas quoi (Konqueror) ;
- noir sur fond jaune (Firefox).

Dans tous les cas, c'était parfaitement lisible.

Dans le dernier cas, Firefox utilise en fait les couleurs système, c'est à dire celles du thème de mon environnement de bureau (Gnome sous Linux).

Pour ce test, je n'avais pas créé d'image fond.png blanche. Après l'avoir fait, j'ai pu vérifier avec les différents navigateurs cités :
- Opera, Konqueror et IE 6 n'appliquent pas l'image de fond (ils gardent leur couleur de fond par défaut) ;
- Firefox 1.5 applique la couleur de fond, mais le texte noir de mon thème fait que ça reste lisible. Effectivement, avec un thème différent, on risque d'avoir un texte blanc sur fond blanc.

À partir du moment où tu n'as pas le contrôle sur la couleur du texte des option, mieux vaut ne pas chercher à modifier le background.

La solution : ne pas chercher à styler les items de la liste déroulante, mais garder les styles par défaut. Les styles par défaut des éléments de formulaire sont le meilleur moyen de s'assurer que les utilisateurs s'y retrouveront, qu'ils identifieront rapidement la fonction de chaque élément, et que les différents éléments et les informations qu'ils portent seront accessibles. On peut faire un peu de mise en forme, mais il faut savoir :
- qu'elle sera peu ou pas prise en compte par certains navigateurs (Konqueror et Safari en particulier) ;
- qu'elle peut poser des problèmes (dont des problèmes d'accessibilité).

Je conseillerais donc de ne pas s'éloigner des chemins balisés (positionnement des éléments de formulaire, bordures des input, etc).
oki
donc apparemment j'ai en gros deux solutions, soit modifier l'arrière plan des choix de la liste, soit ne pas mettre d'arrière plan tout court..
Smiley confus
oki c'est compris, je vais alléger un peu mon code notemment au niveau du background Smiley langue
merci pour ton aide précise mpop,
bonne soirée
Sujet clos
Aller à