Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Kuddel]

Hallo zusammen,

ich teste gerade mit dem o.g. Widget und versuche den Hintergrund zu ändern

Aktuell sieht es so aus:

Bei meinen Dropdown Widgets habe ich es so ändern können:

Da ich von CSS aber keine Ahnung habe, bräuchte ich ein wenig Hilfe.

Vielen Dank schon einmal :-)

[Kuddel]

Habe ein wenig weitergestet.

Mit

sieht es so aus:

Wie kann man jetzt noch den grauen Strich verkürzen und evtl "Uhr" am Ende hinzufügen?

[OliverIO]

@Kuddel
solche dinge mache ich immer mit der developer console von chrome (oder auch firefox).
damit kannst du genau das richtige html element selektieren und live deine anpassungen ausprobieren bzw. sehen, welche einstellungen aktuell für das element gemacht worden sind

[Kuddel]

@OliverIO bin schon ein bisschen weiter

CSS

Spoiler

.mdui-input  {
 color:rgba(255,255,255,0.7) !important;
 z-index:2;
 font-weight:bolder !important;
 text-align: left !important;
 letter-spacing: 0px !important;
}

.mdui-input label {
 /*font-size:0.9em;*/
 
}


.mdui-input input[type="text"] {
 /*border-bottom : 2px solid rgba(255,255,255,0.54) !important; */
 font-weight:bolder !important;
 color : rgba(255,255,255,1) !important;
 background: rgba(0,0,0,0) !important;
 height:calc(100% - 2px) !important;
 border-radius:0px !important;
 margin:0px !important;
 padding:0px !important;
 _line-height:2em !important;
 _min-height:0px !important;
}

.mdui-input input[type="button"] {
 top:-2px;
 color: #2196F3 !important;
}

Beide Zeiten haben die gleichen Einstellungen (font-seize: medium, font-weight: bolder) und sehen doch unterschiedlich aus.

[OliverIO]

@Kuddel
das würde man in der developer console ebenfalls sehen, da ein element
die css eigenschaften des elternelements (und fortgesetzt bis zum body-element) erbt, sowie
ein element noch eigenschaften aus weitere css klassen besitzen kann