Sérsníddu útlit könnunarinnar

Uppfært 1. október 2026

Stíll ákvarðar leturgerðir, liti og uppsetningu könnunarinnar. Bættu við CSS fyrir smáatriði sem stílaritillinn nær ekki yfir. CSS-kóðinn þinn birtist í forskoðun, á opinbera könnunartenglinum og í könnunum sem eru felldar inn á vefsíðuna þína.

Hvar á að bæta við CSS

Opnaðu könnunina, farðu í Semja → Forskoðun og opnaðu Ítarlegri valkostir í stílstikunni. Hakaðu við Ég veit hvað ég er að gera til að sýna CSS-ritilinn. Forskoðunin sýnir breytingarnar um leið og þú skrifar. Þegar stílnum er breytt verður til afrit fyrir þessa könnun sem kallast Minn sérsniðni stíll. Vistaðu könnunina til að birta breytingarnar.

Til að nota stílinn í öðrum könnunum skaltu velja Vista sem stíl vinnusvæðis.

Dæmi

Hvert dæmi virkar sjálfstætt. Blandaðu þeim saman eftir þörfum.

Fyrir liti skaltu nota breytur úr litavali eins og var(--primary), var(--foreground) eða var(--muted-foreground). Þær uppfærast þegar þú breytir litavalinu, þar á meðal ljósum og dekkri útgáfum þess.

Spurningartexti í lit vörumerkisins

.question-title {
    color: var(--primary);
}

Stærri spurningartexti

.question-title {
    font-size: 1.5rem;
}

Stærri hnappar á matskvörðum

Fyrir NPS og aðra tölulega matskvarða sem nota hnappa:

.question-type-interval-scale button {
    height: 3.5rem;
    font-size: 1.5rem;
}

Þykkari framvindustika

.survey-progress {
    height: 6px;
}

Fela skrefafjölda

Fjarlægir „Skref 2 af 5“ á milli hnappanna:

.survey-navigation-step {
    display: none;
}

Kringlóttir leiðarhnappar

.survey-navigation-next,
.survey-navigation-submit {
    border-radius: 9999px;
}

Mjórri dálkar fyrir spurningar og leiðarhnappa

Stilltu báðar breiddir þannig að leiðarhnapparnir haldist í línu við spurningarnar:

.survey-content,
.survey-footer-content {
    max-width: 36rem;
}

Skuggi fyrir ofan fasta leiðarstiku

Notaðu stillingar fyrir tölvur og síma aðskilið. Hvor um sig getur fest leiðarstikuna neðst á skjánum:

@media (min-width: 640px) {
    .survey-shell[data-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

@media (max-width: 639px) {
    .survey-shell[data-phone-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

Fyrirsagnir könnunar

Þetta litar alla h1 og h2 á könnunarsíðunni, þar á meðal textablokkir og titil lokasíðunnar:

h1,
h2 {
    color: var(--primary);
}

Uppbygging síðu

Notaðu klasaheitin hér að neðan í CSS-kóðanum þínum. Við höldum þeim stöðugum á milli útgáfa. Önnur klasaheiti á síðunni eru innri og geta breyst án fyrirvara.

Könnunarsíður deila þessari uppbyggingu. Framvinda, spurningar og leiðarstika birtast aðeins á þeim skjám sem þurfa á þeim að halda:

  • .survey-shell - öll síðan
    • .survey-header - stikan efst, með innri kassanum .survey-header-content
      • .survey-progress - framvindusporið
        • .survey-progress-bar - fyllti hlutinn
    • .survey-main - rýmið á milli stikanna tveggja
      • .survey-content - aðaldálkur efnis
        • .survey-questions - spurningarnar á þessari síðu
    • .survey-footer - stikan neðst, með innri kassanum .survey-footer-content
      • .survey-navigation - leiðarstikan
        • .survey-navigation-back - Til baka
        • .survey-navigation-step - „Skref 2 af 5“
        • .survey-navigation-next - Áfram
        • .survey-navigation-submit - Senda inn könnun

Könnun á einni síðu hefur enga framvindustiku og spurningaskjár hennar hefur aðeins hnappinn Senda inn könnun. Til baka birtist frá og með annarri síðu.

Spurningar

Hver spurning er .question, sem inniheldur:

  • .question-title - spurningartextinn
  • .question-required - * fyrir skylduspurningu, inni í titlinum
  • .question-description - hjálpartextinn undir spurningunni
  • .question-answer - innsláttur svars
  • .question-error - skilaboðin sem birtast þegar svar vantar eða er ógilt

Til að stíla eina tegund spurningar skaltu bæta við klasa tegundarinnar, til dæmis .question-type-select-one .question-title:

  • .question-type-string - Texti
  • .question-type-number - Tala
  • .question-type-date - Dagsetning
  • .question-type-boolean - Já eða Nei
  • .question-type-select-one - Velja einn
  • .question-type-select-many - Velja marga
  • .question-type-ranking - Röðun
  • .question-type-interval-scale - Bilakvarði, eins og NPS
  • .question-type-ordinal-scale - Raðkvarði
  • .question-type-matrix - Fylki
  • .question-type-open-list - Opinn listi
  • .question-type-payment - Greiðsla

Stillingar uppsetningar

.survey-shell ber valkostina úr hlutanum Uppsetning sem eigindi, svo CSS-kóðinn þinn getur fylgt þeim:

  • data-navigation - flow þegar hnapparnir fylgja síðustu spurningunni, sticky þegar þeir eru festir neðst á skjánum
  • data-align - top eða center, staðsetning efnis

Á skjám sem eru mjórri en 640px gilda símastillingarnar. Miðaðu á þær með data-phone-navigation og data-phone-align, eins og í skuggadæminu hér að ofan.

Hvað er ekki leyfilegt

Til að vernda svarendur er ekki hægt að vista könnun með CSS sem:

  • notar @import, image-set() eða src(), eða notar url() án data: vefslóðar
  • bætir við leturgerðum með @font-face. Veldu frekar leturgerð í hlutanum Leturgerðir
  • velur eftir [value], [checked] eða [selected], sem gæti afhjúpað svör
  • inniheldur ógilt CSS eða rununa </
  • er lengra en 50.000 stafir