Dein Problem an dieser Stelle ist die Art und Weise, wie dieses Control von Beckhoff aufgebaut ist. Normalerweise sind alle Elemente sehr umfangreich mit Klassennamen versehen, sodass sich eigentlich sehr gezielt CSS Änderungen durchführen lassen.
Für das Usermanagement erhalten bspw. (fast) alle Elemente eine CSS-Klasse im Stil
TcHmi_Controls_Beckhoff_TcHmiUserManagement-<xyz>, wobei <xyz> den Zweck des jeweiligen Elements noch etwas genauer beschreibt. Jetzt hat dieses Control aber zwei unterschiedliche Arten von Dropdown-Auswahllisten. Einmal gibt es das Dropdown-Menü, welches dir deine Usermanagement Optionen anbietet:
Technisch ist diese Auswahl so realisiert, dass diese Auswahloptionen nur so aussehen wie ein Dropdown-Menü, tatsächlich technisch aber nur ein "fliegender" Div-Container ist - übrigens auch im
tchmi-system-topmostlayer-master. Diese Auswahloptionen mitsamt dem Div-Container werden mittels Javascript zur Laufzeit der HTML-Seite hinzugefügt. Innerhalb des Javascript-Backends des Controls werden dabei auch die CSS-Optionen der Optionen entsprechend angepasst. Jede Option hat bspw. die CSS-Klasse
TcHmi_Controls_Beckhoff_TcHmiUserManagement-template-Dropdown-Element und lässt sich darüber auch stylen, ohne dass andere Controltypen davon beeinflusst werden.
Das lässt sich hier auch ziemlich gut realisieren, da es nur eine begrenzte Anzahl an Optionen gibt. Einige Optionen können ggf. ausgeblendet werden. Der Umfang dazu lässt sich aber im Javascript gut abbilden.
In der Auswahlliste der Benutzer ist das anders.
Hier kann es eine prinzipiell beliebig lange Liste an möglichen Benutzern geben. Deshalb lässt sich das nicht so statisch im Code abbilden, wie das bei den Auswahloptionen oben geschehen ist. Technisch ist hier tatsächlich ein richtiges Dropdown-Menü, Beckhoff nennt dies Combobox, im Einsatz. Diese Combobox unterstützt eine beliebig lange Liste an Optionseinträgen. Und dabei instanziiert Beckhoff einfach dynamisch eine neue Combobox mit der beliebigen Anzahl an Benutzernamen, sobald diese Benutzerauswahl angezeigt werden soll.
Leider hat das Control der Combobox keinen zusätzlichen Aufrufparameter, über welchen zusätzliche CSS Klassen beim dynamischen Aufruf mittels Javascript angehängt werden können, welche dann entsprechend gerendert werden würden. Dann hätte Beckhoff hier auch wieder
TcHmi_Controls_Beckhoff_TcHmiUserManagement-<xyz> Klassen mit übergeben können und das Styling wäre kein Problem.
Stattdessen sind alle Einträge hier aber Einträge einer Combobox, welche sich technisch nicht unterscheiden von anderen Combobox-Einträgen im topmost-Layer. Dies sieht man ja auch in deinem Codebeispiel.
Was kann man nun machen?
(A) Entweder kann man den Sachverhalt akzeptieren und fluchen. Vielleicht liest das Produktmanagement vom TcHMI ja auch hier mit und nimmt das in zukünftige Entwicklungen mit auf. Wann das aber dann verfügbar ist, muss man sicherlich selber rausfinden. (aaarg Beckhoff und seine Release-Notes... Das wäre dann das nächste Mal fluchen^^
Beckhoff plant aktuell wohl eine Informationsseite mit aktuellen Softwareupdates auf deren Webseite, was auch die bisherige Startseite aus TwinCAT 4024 mit den "Update-News" teilweise ersetzten soll. Dort soll es wohl auch wieder Release-Infos geben, ob diese aber über den Informationsgehalt von "xyz has been updated to version xyz and is available for download. Please consider updating." hinausgehen, habe ich nicht gefragt. Das wäre ja unglaublich und die Hölle würde sicherlich zufrieren.)
(B) Du könntest das Control forken und als eigenes
Framework Control realisieren und dabei die Javascript Implementierung anpassen. Dazu bräuchtest du dann eventuell auch ein eigenes Combobox Control. Den Aufwand würde ich nicht eingehen.
(C) Wir nutzen diese Auswahloption "Benutzer wechseln" nicht, sondern nur "Ausloggen" kombiniert mit einer eigenen Login-Seite. Diese haben wir nach unseren Corporate Design Vorgaben gestaltet und lässt sich auch ansonsten weiter in HTML und CSS anpassen, sodass man solche Designwünsche umsetzen kann. Sind halt für ein Bediener ein paar zusätzliche Schritte. Ist uns aber egal, da das vergleichsweise selten vorkommt.
Aber auch in diesem Fall sind Änderungen am HTML und Javascript-Code nötig. Das Auswahlfeld wird hier als HTML
<select>-Element mit einzelnen
<option>-Elementen definiert. Dies wird aber hinsichtlich der Größe usw. vom Betriebssystem gerendert und kann hinsichtlich der Höhe nicht per CSS beeinflusst werden. Stattdessen kann man aber die Userauswahl selber mit einem anderen Javascript Framework, bspw.
Select2, realisieren. Hier hat man vollständige Styling Möglichkeiten. Ausgangspunkt für die Anpassungen auf der Loginseite ist die Javascript-Funktion
updateUserSelection(). Hierin (und natürlich im HTML-Template) muss man die Einbindung des verwendeten alternativen Select-Frameworks realisieren, damit auch die richtigen Elemente erscheinen. Außerdem die
window.addEventListener-Funktion, damit der richtig ausgewählte EIntrag an den Login-Handler übergeben wird.
verdient 
