So ändern Sie die Textfarbe in einem Materializecss wählen Sie im dropdown?

Ich habe eine Materializecss dropdown auswählen, so:

      <form class="col s12">
        <select id="something" [ngModel]="_model.selectedPartyType"
            (ngModelChange)="onSelectChange($event)" name="partyTypeSelection"
            materialize="material_select" class="input-field col s12 m12 l4"
            >
           <optgroup *ngFor="let data of _model.codeTable.codeTokensG" [label]="data[0]">
             <option *ngFor="let cValue of data[1]" [value]="cValue">
               {{_model.codeTable.getCode(cValue).description}}
        </  option>
           </optgroup>
       </select>
      </form>

wie ändere ich die Standard-teal die Farbe für die option text? Ich habe versucht, indem

.dropdown-content li>span {
  color: #000 !important;
}

.dropdown-content li>a {
  color: #000 !important;
}

.select-content li>span {
  color: #000 !important;
}

.select-content li>a {
  color: #000 !important;
}

meiner css-Datei, aber kein Glück mit diesem und Varianten. Wenn ich deaktivieren Sie das Attribut "color" in den Chrome Developer Tools für die

.dropdown-content li>span

ist, wie ich es mir wünschte.

Wie kann ich die Farbe ändern?

InformationsquelleAutor Lars Nielsen | 2016-08-17

2

Jquery Single-line-Lösung
```
 $(".dropdown-content>li>a").css("color", themeColor);
```
Können Sie ändern die Farbe, dynamisch auf eine beliebige Farbe Ihrer Wahl

Live-Demo

Finden Sie den Stift Materialisieren CSS Ändern Thema Farbe von Hitesh Sahu (@hiteshsahu) auf CodePen.

InformationsquelleAutor Hitesh Sahu
9

Ich hatte das gleiche problem heute. Hier ist, wie ich es gelöst:
```
ul.dropdown-content.select-dropdown li span {
    color: #000; /* no need for !important :) */
}
```
dieser funktioniert. danke.
Aus irgendeinem Grund funktioniert das nicht für mich, die Farbe des Textes bleibt als das Standard-blau..
Um sicherzustellen, Behinderte sind nicht betroffen, die ich verwendet habe: ul.dropdown-content.select-dropdown li:not(.disabled) span { color: #1976d2; }

InformationsquelleAutor rationalboss
1

War nicht in der Lage zum ausführen von code, aber ich kopiere eingefügte dropdown-code-Formular der Website und angewendet blue-text Klasse.

HTML:
```
  <ul id='dropdown1' class='dropdown-content'>
    <li> <a href="#!" class = "blue-text">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
```
Haben Ihr versuchen Sie die Anwendung ein text-Klasse zum option-element?

ja, ich habe versucht, diese als gut, aber kein Glück
komisch..diese Antwort ist für mich zu arbeiten und von Ihnen akzeptierte Antwort ist nicht :/ aber noch bin ich nicht daran interessiert, das hinzufügen einer Klasse zu jedem href-ich haben. irgendwelche Ideen?
Ich schlage vor, Sie schauen auf die dropdown-Elemente Hierarchie in der developer-Konsole in Chrom. Wenn Sie nicht möchten, hinzufügen-Klasse, um jedem href-element, das die meisten von Ihnen positiv bewertet werden eine Antwort ist der Weg zu gehen, überprüfen Sie die Hierarchie-und Klassennamen.
Sollte dies funktionieren. Nur sicher sein, dass es den "blauen text" und nicht "text-blau". Ich mische das sehr oft.

InformationsquelleAutor hulkinBrain

Dies ist was für mich gearbeitet

/* Dropdown list color */

.dropdown-content li > a, .dropdown-content li > span {
    color: #fb8c00 !important;
}

InformationsquelleAutor wadie

dies wird sich ändern, die wählen Sie tag :

.select-dropdown{
    color: #000;
}

dies wird sich ändern, die option tag :

ul.dropdown-content.select-dropdown li span {
    color: #000; 
}

InformationsquelleAutor m.enauoram

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.