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

0 votes

Hallo Zusammen,
ich stelle derzeit einen Fragebogen mit Lückentext zusammen.
Mich stört ein wenig das Layout und ich würde gern wissen, ob ich den Rahmen um die Texteingabefelder verändern kann? Bspw. die Farbe oder am Liebsten sogar den Rahmen löschen und stattdessen nur einen Unterstrich anzeigen lassen.
Ist so etwas möglich?

Danke im Voraus

in SoSci Survey (dt.) by (155 points)

1 Answer

+1 vote
 
Best answer

Ja, Sie können das Eingabefeld mittels CSS nach Belieben verändern. Je nachdem, ob Sie nur auf einer Seite so eine Frage haben oder auf mehreren, können Sie den CSS-Code direkt in das Fragebogen-Layout schreiben oder den Befehl pageCSS() verwenden.

Der Code, um z.B. nur unten eine Linie zu zeigen, würde wie folgt lauten:

input[type="text"] {
  border: 0 none;
  border-bottom: 1px solid black;
}

Wenn Sie nicht möchten, dass auch normale Texteingabefragen betroffen sind, müssen Sie noch angeben, innerhalb welchen Elements die Änderung erfolgen soll. Mehr dazu gerne auf Nachfrage.

by SoSci Survey (56k points)
selected by
Vielen Dank für die Antwort! Leider komme ich so noch nicht weiter.
Im PHP Code auf der entsprechendes Seite habe ich stehen: pageCSS('
input[input=text] {
  border: 0 none;
  border-bottom: 1px solid black;
}
');
Ändern tut sich jedoch nichts. Ich bin da leider auch echt kein Profi :(

Wo im Fragebogen-Layout kann ich den Code einfügen? Da es keine entsprechende Option unter Fragebogen-Element gibt gehe ich vom HTML Code aus. Dort bin ich dann jedoch völlig überfragt wo es hin soll. Der sieht bisher so aus:
<!DOCTYPE html>
<html>
<head>
%head%
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
body { padding-bottom: 20px }
div.questionary { min-width: 320px; max-width: %width%; padding: 0 10px; margin: 0 auto; box-sizing: border-box; }
div#s2t-logo { margin-top: 18px }
img.s2-logo { max-width: 100%; vertical-align: top }
div#s2t-progress { width: 200px; float: right; margin: 0 0 20px 32px }
.buttonControl { padding-top: 0; padding-bottom: 16px }
div.progressbar { height: 20px; border-color: #AAAAAA }
div.progressbar div.progresstext { top: 4px }
hr { height: 2px; border: 0px; background-color: transparent; border-bottom: 2px solid %color.4%; margin: 24px 0px 28px 0px; }
a { text-decoration: none; }


/* Center footer on smartphone */
@media (max-width: 450px) {
  div#s2t-controls { text-align: center }
  div#s2t-progress { left: 0; right: 0; margin: 0 auto 10px auto; float: none }
  div#s2t-footer{ text-align: center }
}

/* No auto-zoom on iOS smartphones */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px) {
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  input[type="password"] { font-size: 16px }
}
</style>
</head>
<body>
<div class="questionary">
  <div id="s2t-logo">%logo%</div>
  <hr style="margin-top: 12px;">
  %form.open%
  <div id="s2t-content">
  %questionnaire%
  </div>
  <hr style="margin-bottom: 14px;">
  <div id="s2t-footer">
    <div id="s2t-progress">%progress%</div>
    <div id="s2t-controls">
      %button.control%
    </div>
    %imprint%
  </div>
  %form.close%
</div>
</body>
</html>
Das mit pageCSS() sieht schonmal gut aus. Könnten Sie vielleicht einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen posten? Dann sehe ich mir einmal an, was noch fehlt.
https://webext.mh-hannover.de/soscisurvey/Namen_Eigenschaften/?act=ibhD3fTwsjbHafczqLDbdI17

Der Fragebogen besteht derzeit nur aus einer Seite plus Endseite.
Danke noch mal!
Entschuldigung, ich hatte einen Fehler im CSS-Code (oben schon korrigiert). Statt

input[input=text] {

Muss es heißen

input[type="text"] {

Sollte es dann noch nicht funktionieren, bitte nochmal melden.
Perfekt, vielen Dank!
...