it-swarm.com.de

Wie kann man CSS für select und sein Dropdown-Menü festlegen, wenn ausgewählt wird?

Ich bin ein Backend-Entwickler und lerne Frontend, neu in CSS.

Wenn Sie an einem Projekt arbeiten, müssen Sie ein Standard-CSS für das Tag select festlegen. Beim Klicken auf dieses Tag wird jedoch die Rahmenfarbe von grün in blau und von grün in Textfarbe geändert. Versuchte, die CSS-Implementierung auf Klick herauszufinden, jedoch keine Verwendung. Auf dem inspect-Element ist nur sichtbar, dass ein Ereignis auf select aktiv ist. Versuchte, mein eigenes Ereignis auf click hinzuzufügen und CSS zurück zu ändern, konnte dies jedoch nicht erreichen.

CSS: 

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

Es wurde versucht, dieselbe Klasse bei einem benutzerdefinierten Klickereignis hinzuzufügen, jedoch wird CSS durch etwas anderes ersetzt.

JS:

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

Wie füge ich ein benutzerdefiniertes CSS zum select-Tag und auch zum Dropdown-Menü option hinzu?

EDIT Warum nicht ein Duplikat für how-to-style-the-option-of-a-html-select

Meine Frage ist nicht, option-Tag zu formatieren, sondern um zu verhindern, dass meine select-Box die Rahmenfarbe in Blau ändert, wie wenn wir auf select oder in input-Tag klicken. Wie Kommentar, Fragentitel, Fragenkörper und Antwortfeld ändert sich die Rahmenfarbe beim Klicken auf Blau. Ich möchte nicht, dass das passiert. 

3
NAVIN

Herausgefunden. Diese blaue Farbe und Klick über input , select und textarea tag ist auf bootstrap CSS zurückzuführen. Die Klasse form-control wurde aus select entfernt und die folgende Klasse hinzugefügt. Jetzt funktioniert alles gut.

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

Sie können eine CSS-Pseudoklasse verwenden, um einem Element andere Werte zuzuweisen.

In Ihrem Fall könnten Sie verwenden:

.customSelect:hover zum Zuweisen von Stilen beim Schweben mit der Maus.

.customSelect:active, um Stile nach dem Klicken auf etwas zuzuweisen.

.customSelect:focus, um Stile Elementen zuzuweisen, die von der Tastatur angesteuert oder mit der Maus aktiviert werden.

Dies wäre ein separater Stil zum ursprünglichen .customSelect wie folgt:

.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;
}

Sie können diese auch miteinander verketten:

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

Weitere Informationen zu Selektoren finden Sie hier: https://www.w3schools.com/cssref/sel_hover.asp

0
Jake

Manchmal ist es schwierig, etwas CSS zu finden. Versuchen Sie, ein Element mit :active oder :hover usw. zu untersuchen.

 enter image description here

0
qiAlex

Möglicherweise müssen Sie eines selbst erstellen, da der Zugriff auf die einzelnen Elemente des select-Elements kompliziert ist. Ich hoffe, dass jemand eine bessere Antwort geben kann, aber falls nicht: W3 Schools hat eine dokumentierte Methode, die ziemlich schwer ist.

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

(Sorry über den Link; bearbeitet)

0
AutoTurtle