CSS Checkbox Generator

Hvað er þetta verkfæri?

Sjálfgefin hökbox vafra líta ólíkt út í hverjum vafra og erfitt er að endurhanna þau beint, þar sem innbyggt útlit þeirra er teiknað af stýrikerfinu en ekki með venjulegu CSS. Hefðbundna lausnin er að fela upprunalega hökboxið sjónrænt og hanna í staðinn systurstak sem stjórnast af :checked-stöðu hökboxins — inntakið helst að fullu virkt og aðgengilegt, aðeins útlit þess breytist.

Þetta verkfæri smíðar þetta mynstur fyrir þrjá algenga hökbox-stíla: ávalan kassa með hreyfimynduðu hökmerki, rennirofa í iOS-stíl og fylltan hring (líkt og valhnappur). Smelltu á hökboxið í forskoðuninni til að sjá hakaða stöðu, stilltu stærð og áherslulit, og afritaðu svo CSS-kóðann.

Heimild: Selectors Level 4, W3C — staðallinn sem skilgreinir :checked-gervifluflokkinn sem þessi tækni byggir á.

Af hverju að nota það?

• Lifandi, smellanleg forskoðun — smelltu á hökboxið til að sjá nákvæmlega hvernig hakaða og óhakaða staðan lítur út.
• Þrír ólíkir, algengir stílar í einu verkfæri: hökkassi, rofi og fylltur hringur.
• Undirliggjandi stak er áfram raunverulegt <input type="checkbox">, svo lyklaborðsleiðsögn, sending eyðublaða og skjálesarar halda áfram að virka eðlilega.
• Stillanleg stærð og áherslulitur, sett beint inn sem gildi í CSS-kóðann í stað þess að vera skilin eftir sem breytur til að fylla út.
• Ekkert táknletur, SVG-skrá eða mynd þarf — hökmerkið og hnúðurinn eru teiknuð með einföldum CSS-römmum og gervistökum.
• Ókeypis, keyrir í vafranum þínum, engin skráning.

Hvernig á að nota það

1. Veldu stíl: ávalan hökmerki, rofa eða fylltan hring.
2. Dragðu stærðarsleðann til að stækka eða minnka hökboxið.
3. Veldu áherslulit — hann verður bakgrunns- og rammalitur í hakaðri stöðu.
4. Smelltu á hökboxið í forskoðunarglugganum til að staðfesta að bæði hakaða og óhakaða staðan líti rétt út.
5. Afritaðu CSS-kóðann sem myndaður er yfir í stílblaðið þitt og notaðu hann á hvaða <input type="checkbox"> sem er umlukið á sama hátt og merkingin í forskoðuninni.

Dæmi

Inntak

Style: rounded checkmark · Size: 24px · Color: orange

Úttak

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

Hökbox-inntakið er sjónrænt falið; sýnilegi kassinn er systurstak <span> sem er hannað út frá :checked-stöðu inntaksins, með litlum snúnum ramma sem myndar hökmerkið þegar hakað er við.

Af hverju á að fela upprunalega hökboxið í stað þess að fjarlægja það

Það er freistandi að sleppa raunverulega <input>-stakinu og byggja hökbox eingöngu úr hönnuðu <div> með smellihandfangi, en þá tapast lyklaborðsstuðningur, sending eyðublaða og skjálesarasemantík ókeypis. Mynstrið sem þetta verkfæri myndar heldur raunverulega hökbox-inntakinu í kóðanum — aðeins sjónrænt falið með opacity: 0 og endurstaðsett — þannig að vafrinn meðhöndlar það áfram sem alvöru hökbox í öllu sem máli skiptir, á meðan systurstak sér um sýnilega hönnun.

Stílarnir þrír í hnotskurn

• Ávalur hökmerki: kunnuglegt mynstur af ferningi með hökmerki, algengast fyrir eyðublaðareiti, samþykkishökbox og fjölvalslista.
• Rofi: kemur fram sem samstundis kveikt/slökkt stilling frekar en eyðublaðareitur — hentar best fyrir stillinga- og valkostaskjái frekar en hökboxlista.
• Fylltur hringur: einfalt útlit líkt og valhnappur, gagnlegt þegar ferhyrndur kassi virkar sjónrænt þungur á móti ávölum viðmótsstökum í nágrenninu.

Samræming við annað í viðmótinu þínu

Áherslulitur sem myndaður er hefur aðeins áhrif á hakaða stöðu — veldu hvaða lit sem er úr vörumerki þínu eða hnöppum svo hökboxið falli vel að öðru á síðunni. Paraðu hann með sama border-radius og notaður er annars staðar í viðmótinu fyrir samræmdara útlit.

→ Border Radius Generator

Algengar spurningar