Wie kann die Checkbox zur Antwort einer Frage in Farbe und Form ändern?

Question

Hallo,

ich würde gerne die Checkbox zur Antwort einer Frage in hellgrau hinterlegen und an den Ecken abrunden? Bei den benutzerdefinierten Auswahlfeldern kann ich nur Bilder verwenden, die eine anschließende Markierung bei Auswahl der Antwort nicht zulassen, auch wenn ich diese transparent in den Hintergrund lege.
Besteht die Möglichkeit bei den Standardauswahlfeldern neben der Größe auch die Farbe zu ändern und die Ecken abzurunden? Die klassischen Befehle wie background-color und border-radius funktionieren leider nicht.

Vielen Dank schonmal für die Unterstützung!

Answer 1

Im Layout "SoSci Survey Standard 2023" sind die Auswahlfelder angepasst - im HTML-Template finden Sie dazu folgende CSS-Befehle:

input[type="checkbox"] {
  box-sizing: border-box;
  width: 1.25em;
  height: 1.25em;
  color: %color.4%;
  appearance: none;
  border: 2px %color.8% solid;
  border-radius: 0;
  background-color: white;
}

input[type="checkbox"]:before {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    content: "✓";
    font-weight: bold;
    text-align: center;
    color: white;
    box-shadow: inset 1em 1em %color.4%;
    line-height: 1;
}
input[type="checkbox"]:checked::before {
    content: "✓";
    transform: scale(1.1);
}

Wenn Sie das o.g. Layout verwenden, könnten Sie die gewünschten Änderungen durch folgende Ergänzung bekommen.

input[type="checkbox"] {
      border: 2px green solid;
      border-radius: 4px;
      background-color: #EEEEEE;
}