28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
J'ai un menu, avec des items et un qui est présélectionné : Nantes en <selected> dans cet exemple.
Je voudrais le mettre en forme avec une règle CSS, mais je n'arrive pas à le "cibler" comme sélecteur.
<label for="ville">Ville :</label>
    <select name="ville" id="ville">
      <option value="1">Paris</option>
      <option value="2" selected="selected">Nantes</option>
      <option value="3">Bordeaux</option>
      <option value="4">Marseille</option>
      <option value="5">Strasbourg</option>
    </select>
Merci pour votre aide.
Modifié par krakkos (16 Feb 2009 - 10:17)
Salut krakkos,

La réponse est simple, tu ajoute une class a ton element option

<option class="une_class_selected" value="2" selected="selected">Nantes</option>


Après tu vas surement me dire : "oui mais j'aimerais que sa soit dynamique quand je change de page ou que je choisis un idem".. Ben c'est cette question là que tu aurais dû poser Smiley lol

Mais la réponse est : utilise le javascript pour détecté l'élément option selectionné et applique lui le style souhaité Smiley cligne
Effectivement, appliquer une classe est la solution que j'utilise habituellement Smiley cligne
L'objectif était que ce soit valable quelque soit le menu et que ses oit dynamique !

Avec la réponse que tu me donnes : utiliser du JavaScript, et bien je vais faire avec !

As-tu une ressource en ligne, un lien sur ce type de JavaScript à utiliser ?
Un select qui sert de menu, c'est pas des plus optimal, mais soit.

L'item que tu veux différencier est-il la page courrante (ce qui semblerait le plus logique) ou réellement celui sélectionné par l'utiliser (même si le formulaire n'as pas été validé) ?

Dans le premier cas, la classe peut être appliquée de la même façon que le selected : en PHP.

Sinon, il reste le JS, mais ce n'est peut-être pas une bonne idée de modifier le marquage de la page en cours.
La réponse à la question de départ est:
option[selected=selected] {
    /* Styles pour tout élément OPTION ayant un attribut
        selected avec pour valeur "selected" */
}

Attention, il n'est pas dit que le navigateur te laisse attribuer le moindre style CSS à un OPTION. Je dirais que certains le permettront, et que d'autre t'enverrons balader gentiment.
Trop fort Florent V. !
Cela fonctionne parfaitement avec Firefox 3, Opera 9, IE 7 et Safari 3.
Comme toujours : un grand merci !