2017-03-06 4 views
0

Im en utilisant le formulaire de contact 7 sur wordpress, je ne veux pas utiliser un plugin plutôt utiliser plaine css/js pour apporter les résultats si possible.Y at-il un moyen de style <select> options de la liste déroulante conteneur et articles?

Quelque chose comme ceci: Dropdown style

+1

La seule façon de faire quelque chose comme ça serait de simuler un menu déroulant de sélection, vous ne pouvez pas le style en fait un 'ce menu déroulant select' comme parce que le style de cet élément est déterminé par le navigateur. – APAD1

+0

Les options de sélection ne peuvent pas être réalisées avec CSS seul, la partie supérieure peut être créée avec CSS. https://codepen.io/ericrasch/pen/zjDBx – Christina

+0

dans le formulaire de contact 7, woocommerce et d'autres formes, j'utilise juste jquery pour envelopper tous les choix, puis je style ce que je peux. Beaucoup de plugins jQuery ne vous donneront pas la possibilité de taper les premières lettres de l'option. – Christina

Répondre

1

Tous les navigateurs définissent difrent les uns par rapport aux autres. Vous pouvez utiliser UL et LI pour faire une liste de sélection personnalisée.

Voici un example, cela peut vous aider à faire en sorte que tous les select soient similaires sur tous les navigateurs et sur les mobiles.

et sélectionnez serait quelque chose comme:

<ul> 
    <li class="init">[SELECT]</li> 
    <li data-value="value 1">Option 1</li> 
    <li data-value="value 2">Option 2</li> 
    <li data-value="value 3">Option 3</li> 
</ul> 
-1

Si vous vous donnez un menu déroulant id, vous pouvez sélectionner l'ID en utilisant jQuery et utiliser sa méthode enfants. Vous pouvez même spécifier quel enfant.

Quelque chose comme ceci:

$ ("dropdownId") enfants() css ({ "color": "jaune", "frontière": "rouge 1px solid"})..

+0

Cela n'aurait [aucun effet] (https://jsfiddle.net/uw3vfwrq/) sur le style des options. – APAD1