Wie CSS für select (kein Dropdown-Pfeil) anpassen?

tomster · 21 September 2018, 11:37:50

Ich versuche gerade die Bedienelemente für einen meiner SB-Player etwas "platzsparender" zu Organisieren. Dabei möchte ich die Dropdownliste der Favoriten in die Anzeige integrieren, so dass ich von dort aus die Favoriten anwählen kann. Da wo auf dem Bild die Ellipse ist, soll man das Dropdown öffnen können. Ich weiß ja wo ich hin-touchen muss

Damit das einigermaßen sauber ausschaut, sollte der Dropdown-Pfeil und der Rahmen verschwinden, sowie die Anzeige des jeweilig gewählten Favoriten "mittig" angezeigt werden. Irgendwie scheinen aber die css-Klassen nicht ~~richtig~~ so wie ich will angewendet zu werden.
Border bekomme ich noch recht einfach in der select-Klasse weg, aber beim Pfeil und dem center kommt mir anscheinend der select-wrapper in die Quere. Auch auskommentieren führt nur teilweise zum gewünschten Ergebnis (Pfeil is weg, aber der Text steht linksbündig).

Code Auswählen


select,
input.textinput {
    border: none !important;
    text-align: center;

Code Auswählen


.select_wrapper:after {
 /*    position: absolute;
    right: 6px;
   content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    font-size: 150%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-appearance: none !important;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;*/
}

Was mache ich denn falsch, bzw. wo verstehe ich das Zusammenspiel der CSS-Klassen nicht richtig?

setstate · 21 September 2018, 20:16:43

Gib deinem select-widgets eine eigene CSS-Class

Code Auswählen

<div data-type="select" data-device="AvReceiverZ2" class="wthBorder"></div>

,die du dann in deiner fhem-tablet-ui-user.css definierst

Code Auswählen


[data-type="select"].wthBorder select {
    border: 0px solid transparent;
    text-indent: 25px;
}

[data-type="select"].wthBorder .select_wrapper:after {
    font-size: 0px;
}

in der index.html muss diese dann im <head> eingefügt werden

Code Auswählen

<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

tomster · 22 September 2018, 08:23:03

Servus setstate,

so einfach geht's. Vielen Dank für die rasche Hilfe!

FHEM Forum

Wie CSS für select (kein Dropdown-Pfeil) anpassen?

tomster

setstate

tomster