Style par défaut de la balise <select>

[Nissone]

Bonjour,

Je voudrais connaître la valeur par défaut du padding des select.

J'ai une feuille de style déjà bien avancée, et je constate que mon <select> s'affiche mal sous Mozilla : il manque la fin du texte.

Si je lui applique un padding à droite, le padding s'applique après la flèche ; ce qui provoque un vide entre la flèche et le bord droit du select.

Après quelques tests, il s'avère que c'est à cause de ça :

* {padding:0}

Si j'enlève mon padding:0, le select se réaffiche correctement, de la largeur du texte.

Comme j'ai déjà fais beaucoup de pages avec cette feuille de style, je ne veux pas prendre le risque de supprimer mon padding:0 du *.

Je souhaiterais donc mettre une ligne avec le selecteur select et lui redonner son style par défaut.

Est-il possible de connaître les valeurs pas défaut attribuées au padding afin de lui re-donné son comportement naturel ?

[Dudu]

Cela dépend du navigateur: chacun a ses propres valeurs par défaut.

Si c'est pour Mozilla que tu cherches, tu es déjà plus chanceuse: en fouillant dans les entrailles de l'application, on trouve les différentes ressources utilisées telles que les feuilles de style, les images, etc..

Par contre, sous Windows, je ne sais plus comment on fait pour afficher les ressources d'une appli

[Nissone]

Merci de ta réponse.

Quand tu dis de fouiller dans les entrailles, tu ne parles pas du menu ?

J'ai regardé dans le menu mais ai vite fait le tour.

Je ne trouve pas non plus d'indication dans l'aide (mais je vais y refaire un tour)

Par contre, peut-être parlais-tu d'un fichier à aller voir directement dans mes dossiers ?!

[Dudu]

En fait, il ne faut pas lancer l'application (si elle est déjà lancée ce n'est pas grave), il faut l'<ouvrir> comme un vulgaire dossier afin d'afficher ses ressources.

Sur Mac, c'est un clic droit sur l'appli, puis "Afficher le contenu". De mémoire, le principe n'est pas très éloigné sous Win, mais de là à m'en souvenir... (sans PC sous la main, surtout)

[Nissone]

J'ai trouvé l'info dans Program Files\Mozilla Firefox\res\forms.css

Dans le cas du select :

select {
  margin: 0;
  border-color: ThreeDFace;
  background-color: -moz-Field;
  color: -moz-FieldText;
  font: -moz-list;
  line-height: normal !important;
  white-space: nowrap !important;
  text-align: start; 
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-user-focus: normal;
  -moz-appearance: menulist;
  border-width: 2px !important;
  border-style: inset !important;
  -moz-border-radius: 0 !important;
  text-indent: 0;
}

Mais ça na pas solutionné mon problème...

[Dudu]

Si vraiment en dernier recours, rien ne marche sur la CSS (les hacks, les histoires de sélecteurs, etc.) il reste la solution radicale, façon tractopelle:

À la place de ton lien vers la CSS dans le code HTML, tu mets çà:

<style type="text/css" media="all">
/* <![CDATA[ */
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (eregi('Mozilla/5',$ua) || eregi('Gecko',$ua) || (eregi('Firefox',$ua))) {
  $browser = "Mozilla";
  {
if (eregi('Safari',$ua)) {
  $browser = "Safari";	
  }
if ($browser =="Mozilla") {
	$style = '@import url(/styles-mozilla.css);';
	}
else {
	$style = '@import url(/styles.css);';
	}
echo $style;
?>

/* ]]> */
</style>

En remplaçant les paths par ceux adéquats, et en admettant que les pages soient dotées de l'extension PHP.

Ce n'est pas une bonne méthode habituellement, mais s'il ne reste que çà à faire ...

(si des pros du PHP voient une erreur dans mon code, n'hésitez pas, je suis une vraie ....... en PHP)

[Nissone]

Merci Dudu.

Si ce n'est pas bon pour cette fois, ça servira sûrement à d'autres (personnes / occasions) !