0 votes
in SoSci Survey (dt.) by s205604 (150 points)

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!

1 Answer

0 votes
by SoSci Survey (307k points)
selected by s205604
 
Best answer

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;
}

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...