Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[nobse]

Guten Abend

wie kann ich das hqwidgets checkbox

• kleiner darstellen (Einstellung klein ist schon gewählt aber noch zu groß)

• wie kann die Hintergrundfarbe geändern werden (im Auswahlfeld kann nur Orange gewählt werden)

• ist es möglich je nach Schaltzustand die Hintergrundfarbe zu ändern

hwwidgets CircleKnob

• Einstellung der Schriftfarbe wird nicht richtig übernommen (Beschriftung wird in der eingebenen Schriftfarben angezeigt aber Messwert nicht, Schriftfarbe wird nicht gespeichert dafür die Farbe die bei Still eingestellt ist)

Wünsche ein schönes WE

Gruß Norbert

[Bluefox]

Man kann leider genau diesen check box nicht einfach ändern.

Ich habe checkbox irgendwo gefunden, aber der sieht nur gut aus.

Eigentlich man sollte es umschreiben, aber keine Zeit. Ich habe noch kleinere Version von checkbox geschafft. Dann habe ich gehofft, dass Community mir hilft und andere CSS Styles liefert.

Hier ist ein Beispiel, wie man die Farbe ändern kann:

.checkbox-small-orange-wrap{
    width: 108px;
    height: 34px;
    background: #fff;
    border-radius: 17px;
    box-shadow: inset 0 15px 25px #d1d1d1;
    position: relative;
}

.checkbox-small-orange-wrap:before{
    content:"";
    width: 103px;
    height:29px;
    border-radius: 15px;
    background: #111111;
    box-shadow: inset 0 15px 25px #a5a4a4;
    position: absolute;
    left: 3px;
    top: 3px;
}

.checkbox-small-orange-wrap:after{
    content:"";
    width: 100px;
    height:26px;
    border-radius: 13px;
    background: -webkit-linear-gradient(top, #00fe37 0%, #00e771 61%, #009f00 91%, #12a71f 100%);
    box-shadow:
        inset 0 1px 10px rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 4px;
    top: 4px;
    transition: all 1s ease-in-out;
}

.checkbox-small-orange-button{
    display: inline-block;
    width: 58px;
    height: 26px;
    border-radius: 15px;
    background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
    border-top: solid 2px #fafafa;
    border-bottom: solid 2px #ada39d;
    box-shadow:
        1px 6px 7px rgba(0, 0, 0, 0.5),
        0 0 5px rgba(0, 0, 0, 0.4);
    position: relative;
    top: 2px;
    left: 3px;
    z-index: 99;
    transition: left 0.2s ease-in-out;
}

.checkbox-small-orange-button:before{
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
    position: absolute;
    top: 4px;
    right: 5px;
}

.checkbox-small-orange-button:hover{
    border-bottom: none;
    top: 3px;
    box-shadow:
        1px 4px 7px rgba(0, 0, 0, 0.5),
        0 0 3px rgba(0, 0, 0, 0.4);
}

.checkbox-small-orange-button-active{
    left: 47px;
    transition: left 0.2s ease-in-out;
}

Diesen Kode konnte man in CSS Lasche einfugen und Small-Checkbox auswählen.

Falls du CSS kannst und mir noch kleinere Version von Checkbox liefern konntest, oder andere Farben beschaffen, das wäre toll.
48_img_001.png

[hometm]

An der oben genannten Checkbox ist mir ein Fehler aufgefallen:

Wenn man die Checkbox 1x betätigt, wird der Wert 2x ins dazugehörige Objekt geschrieben

Vis: Checkbox Objekt ID:

javascript.0.TestDelMe

Test-Sktipt:

createState('TestDelMe',

0,

false);

subscribe({

id: "javascript.0.TestDelMe"

},function(data){dummy(data)});

function dummy(data){

var x=getState("javascript.0.TestDelMe");

log(x.val+" "+x.ack);

}

Logfile Output:

javascript.0 2015-11-08 09:55:04 info javascript.0 script.js._TestDummy: false false

javascript.0 2015-11-08 09:55:03 info javascript.0 script.js._TestDummy: false false

javascript.0 2015-11-08 09:54:47 info javascript.0 script.js._TestDummy: true false

javascript.0 2015-11-08 09:54:46 info javascript.0 script.js._TestDummy: true false

[nobse]

Hallo Bluefox

danke für das CSS

Anbei das CSS für eine noch kleinere Version in Blau

.checkbox-small-orange-wrap{
    width: 60px;
    height: 20px;
    background: #fff;
    border-radius: 17px;
    box-shadow: inset 0 15px 25px #d1d1d1;
    position: relative;
}

.checkbox-small-orange-wrap:before{
    content:"";
    width: 54px;
    height:16px;
    border-radius: 15px;
    background: #111111;
    box-shadow: inset 0 15px 25px #a5a4a4;
    position: absolute;
    left: 3px;
    top: 3px;
}

.checkbox-small-orange-wrap:after{
    content:"";
    width: 56px;
    height:16px;
    border-radius: 13px;
    background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%);
    box-shadow:
        inset 0 1px 10px rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 2px;
    top: 2px;
    transition: all 1s ease-in-out;
}

.checkbox-small-orange-button{
    display: inline-block;
    width: 28px;
    height: 12px;
    border-radius: 15px;
    background: -webkit-linear-gradient(top, #efeeee 0%,#bcb9b8 100%);
    border-top: solid 2px #fafafa;
    border-bottom: solid 2px #ada39d;
    box-shadow:
        1px 6px 7px rgba(0, 0, 0, 0.5),
        0 0 5px rgba(0, 0, 0, 0.4);
    position: relative;
    top: 2px;
    left: 2px;
    z-index: 99;
    transition: left 0.2s ease-in-out;
}

.checkbox-small-orange-button:before{
    content: "";
    width: 8px;
    height: 9px;
    border-radius: 50%;
    background: -webkit-linear-gradient(top, #c2c0be 0%,#d6d6d6 100%);
    position: absolute;
    top: 2px;
    right: 5px;
}

.checkbox-small-orange-button:hover{
    border-bottom: none;
    top: 2px;
    box-shadow:
        1px 6px 7px rgba(0, 0, 0, 0.5),
        0 0 3px rgba(0, 0, 0, 0.4);
}

.checkbox-small-orange-button-active{
    left: 29px;
    transition: left 0.2s ease-in-out;
}

Schöner währe es naturlich wenn man diese sachen einstellen könnte.

Gruß Norbert

[Bluefox]

Falls du findest wie ich dynamisch backgroud in

.checkbox-small-orange-wrap:after {
    content:"";
    width: 56px;
    height:16px;
    border-radius: 13px;
    background: -webkit-linear-gradient(top, #558abd 0%, #5488ba 31%, #46729d 61%, #2a4661 100%);
    box-shadow:
        inset 0 1px 10px rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 2px;
    top: 2px;
    transition: all 1s ease-in-out;
}

ändern kann. Dann kann ich das machen.