Question pr personaliner une liste déroulante

Fermé
Karkwa - 16 janv. 2012 à 03:28
matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 - 19 janv. 2012 à 09:53
Bonjour,

J'ai une liste déroulante qui offre quelques choix aux internautes, mais elle est tout ce qu'il a de plus basique. J'aimerais savoir comment je pourrais la modifier, par exemple mettre une couleur de fond, changer la taille du texte qui est dedans (car c'est une drop list qui contient déjà des choix à sélectionner), etc.

Pour l'instant, mon code est le suivant :

<form method="post" action="styles/redirection.php">
<p>
     <select name="menu_destination">
          <option value="1">Choix 1</option>
          <option value="2">Choix 2</option>
          <option value="3">Choix 3</option>
          <option value="4">Choix 4</option>
     </select>

     <input type="submit" value="Go" title="valider pour aller à la page sélectionnée" />

</p>
</form>


Voilà, alors j'image que je peux faire ça avec des CSS!? Mais je ne sais pas comment ni quoi écrire, alors si quelque une pouvaient m'aider!? ^^

Merci beaucoup!


4 réponses

matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 47
16 janv. 2012 à 10:36
Bonjour,

tu ecris ceci par exemple dans un fichier custom.css
.mylist {
     font-size: 12px;
     font-family:"Times New Roman";
     
     color:red;
     text-align:center;
     background-color:#d0e4fe;
}


Et dans ton html tu ecris ceci, dans ton header de fichier HTML, cela va te permettre de lier ton fichier HTML a ton fichier css:

<link rel="stylesheet" type="text/css" href="custom.css" />


Ensuite pour utiliser ta dropdownlist tu ecris ceci:
<select class="mylist" name="menu_destination">
1
Merci beaucoup! J'ai réussi à faire ce que je voulais, grâce à vous! :) Par contre, cela m'a amené à me poser une nouvelle question et, du coup, un nouveau problème : je me demandais comment faire si je voulais que le choix qu'on sélectionne dans ma droplist s'applique automatiquement au clic, à la sélection, et sans être obligé d'utiliser le bouton pour valider. Est-ce possible? Il me semble avoir déjà vu cela, également !?

Merci beaucoup encore pour votre aide!
0
matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 47
17 janv. 2012 à 10:33
Oui c'est possible. Si l'action desiree peut etre appelee en JavaScript par exemple, il suffit d'utiliser l'attribut onchange de ton select:


<select onchange="alert(1)" name="menu_destination">
0
matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 47
17 janv. 2012 à 10:37
Du coup pour ton cas, il te suffit d'appeler la validation de ton form dans l'attribut onchange:

onchange="this.form.submit()"
0
Merci beaucoup encore! J'aurais (encore une fois) une petite et dernière (je l'espère!) question : j'ai mon formulaire placé à un endoit et j'aimerais que, sur la même ligne, il y ait un bout de texte. Par contre, je voudrais que le formulaire soit positionné à gauche de la page, et que le texte soit tout à la droite, mais sur la même ligne. Et je n'arrive pas à les positionner de la sorte; soit le formulaire décale vers le bas, ou soit c'est le texte qui passe à la ligne suivante. Comment ce problème pourrait-il être résolu? Merci! :D
0
Et pendant que j'y suis, je remarque aussi un petit décalage vers le bas de la part du formulaire (par rapport au haut de la boîte dans laquelle il se trouve, auquel j'aimerais qu'il soit le plus rapproché possible). Comment faire pour éviter cela également ?

Dans le fond, j'aimerais pouvoir positionner mon formulaire le plus librement possible, mais j'ai l'impression que certaines choses que j'ignore me bloquent... !?
0
matthoffman Messages postés 405 Date d'inscription lundi 24 mars 2008 Statut Membre Dernière intervention 22 janvier 2013 47
19 janv. 2012 à 09:53
La il nous faudrait ton code, ca serait plus simple.

Ce que tu veux faire, peut se faire en utilisant le CSS.
Cherche du cote des attributs padding.
0