web-dev-qa-db-fra.com

Comment définir CSS pour select et son menu déroulant une fois sélectionné?

Je suis un développeur backend, frontend d'apprentissage, nouveau dans CSS.

Sur un projet, vous devez définir un CSS par défaut pour la balise select. Toutefois, lorsque vous cliquez sur cette balise, la couleur de la bordure devient bleue au lieu de vert et la couleur du texte au noir à partir du vert. J'ai essayé de trouver CSS implémentant au clic mais pas d'utilisation. Tout ce qui est visible sur l'élément inspect est qu'un événement est actif sur select. J'ai essayé d'ajouter mon propre événement au clic et de changer le CSS, mais je ne pouvais pas l'atteindre.

CSS: 

.customSelect {
    border-radius: 1.25rem;
    height: calc(5.25rem + 2px);
    font-size: 3rem;
    color: #00a082;
    border: 3px solid #cbece5;
}

J'ai essayé d'ajouter la même classe à l'événement click personnalisé, mais quelque chose d'autre remplace mon CSS.

JS:

$("#selectId").click( () => {
    $("#selectId").addClass('customSelect');
});

Comment ajouter du CSS personnalisé à la balise select et à son menu déroulant option?

EDIT Pourquoi pas un duplicata pour comment-style-l'option-de-un-html-select

Ma question n’est pas de styliser la balise option, mais d’empêcher ma boîte select de changer la couleur de la bordure en bleu, comme lorsque nous cliquions sur select ou dans la balise input et que, par défaut, ces modifications passaient au bleu. Comme commentaire, titre de la question, corps de la question et zone de réponse, la couleur de la bordure devient bleue lorsque vous cliquez dessus. Je ne veux pas que cela se produise. 

javascriptjqueryhtmlcss
3
NAVIN

Deviner. Cette couleur bleue et cliquez sur entrée , sélection et textarea tag est due à bootstrap CSS. Suppression de la classe form-control de select et ajout de la classe suivante. Tout fonctionne bien maintenant.

CSS: 

/* Customized Select Box */
.customSelect {
    background-color: #fff;
    background-clip: padding-box;
    border: 0.5rem solid #cbece5;
    border-radius: 1.25rem;
    color: #00a082;
    display: block;
    font-size: 2rem;
    height: 3.5rem;
    line-height: 1.5;
    padding: 0.25rem 0.75rem;
    width: 100%;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}
0
NAVIN

Vous pouvez utiliser une pseudo classe CSS pour affecter différentes valeurs à un élément.

Dans votre cas, vous pouvez utiliser:

.customSelect:hover pour attribuer des styles en survolant avec la souris.

.customSelect:active pour attribuer des styles après avoir cliqué sur quelque chose.

.customSelect:focus pour attribuer des styles aux éléments ciblés par le clavier ou activés par la souris.

Ce serait un style séparé du .customSelect original comme ceci:

.customSelect {
  border-radius: 1.25rem;
  height: calc(5.25rem + 2px);
  font-size: 3rem;
  color: #00a082;
  border: 3px solid #cbece5;
}

.customSelect:hover {
  new-styles: new value;
}

Vous pouvez également les chaîner ensemble:

.customSelect:hover, .customSelect:active {
  style-to-apply-to-both: value;
}

En savoir plus sur les sélecteurs ici: https://www.w3schools.com/cssref/sel_hover.asp

0
Jake

Il est parfois difficile de trouver du code CSS, essayez de contrôler un élément avec :active ou :hover, etc.

 enter image description here

0
qiAlex

Vous devrez peut-être en créer un vous-même, car accéder aux éléments individuels de l'élément select est compliqué. J'espère que quelqu'un pourra fournir une meilleure réponse, mais dans le cas contraire: W3 Schools dispose d'une méthode documentée assez lourde.

https://www.w3schools.com/howto/howto_custom_select.asp

(Désolé pour le lien; édité)

0
AutoTurtle