Stil ändern spezifischer <option> in DDL

Question

Methode DDL erstellen

var groups = lstActivity.OrderBy(x => x.codeAC.Text).ThenBy(x => lstTraining.IndexOf(x.text)).ThenBy(x => x.text).GroupBy(x => x.codeAC.Text).OrderBy(g => lstCategories.IndexOf(g.Key)); 

foreach(var group in groups) 
{ 
    var slg = new SelectListGroup() { Name = group.Key }; 

    foreach(codeAC activity in group) 
    { 
     SelectListItem item = new SelectListItem() { Text = activity.text, Value = activity.ID.ToString(), Group = slg }; 
     lstAssignments.Add(item); 
    } 
} 

CSHTML:

@Html.DropDownList("activityID", null, "-- Select Activity --", htmlAttributes: new { @id = "activityID", @class = "form-control" }) 

Wie es in HTML rendert:

<select name="activityID" class="form-control valid" id="activityID"> 
    <option value="">-- Select Activity --</option> 
    <optgroup label="Test Group 1"> 
     <option value="7">TEST 1</option> 
     <option value="6">TEST 2</option> 
     <option value="5">TEST 3</option> 
     <option value="4">TEST 4</option> 
     <option value="2">TEST 5</option> 
     <option value="1">TEST 6</option> 
     <option value="10">TEST 7</option> 
     <option value="9">TEST 8</option> 
     <option value="8">TEST 9</option> 
    </optgroup> 
    <optgroup label="Test Group 2"> 
     <option value="11">TEST 10</option> 
     <option value="12">TEST 11</option> 
    </optgroup> 
</select> 

Meine Frage ist .. Wie kann ich die options unter der optgroup Test Group 2 in rot beim Laden der Seite bekommen?

Answer 1

ein CSS Attributselektor Verwendung: optgroup[label="Test Group 2"]

optgroup[label="Test Group 2"] { 
 
    color: red; 
 
}

<select name="activityID" class="form-control valid" id="activityID"> 
 
    <option value="">-- Select Activity --</option> 
 
    <optgroup label="Test Group 1"> 
 
    <option value="7">TEST 1</option> 
 
    <option value="6">TEST 2</option> 
 
    <option value="5">TEST 3</option> 
 
    <option value="4">TEST 4</option> 
 
    <option value="2">TEST 5</option> 
 
    <option value="1">TEST 6</option> 
 
    <option value="10">TEST 7</option> 
 
    <option value="9">TEST 8</option> 
 
    <option value="8">TEST 9</option> 
 
    </optgroup> 
 
    <optgroup label="Test Group 2"> 
 
    <option value="11">TEST 10</option> 
 
    <option value="12">TEST 11</option> 
 
    </optgroup> 
 
</select>