CSS-valintaruutugeneraattori

Mikä tämä työkalu on?

Selaimen oletusarvoiset valintaruudut näyttävät erilaisilta jokaisessa selaimessa ja niitä on vaikea tyylitellä suoraan, koska niiden sisäänrakennetun ulkoasun piirtää käyttöjärjestelmä, ei pelkkä CSS. Vakioratkaisu on piilottaa natiivi valintaruutu visuaalisesti ja tyylitellä sen sijaan sisarelementti, jota ohjaa valintaruudun :checked-tila — syöttöelementti pysyy täysin toimivana ja saavutettavana, vain sen ulkoasu muuttuu.

Tämä työkalu rakentaa tuon mallin kolmelle yleiselle valintaruutu-tyylille: pyöristetylle laatikolle animoidulla valintamerkillä, iOS-tyyliselle liukuvalle vaihtokytkimelle ja täytetylle ympyrälle (valintanappimaiselle) tyylille. Napsauta valintaruutua esikatselussa nähdäksesi valitun tilan, säädä kokoa ja korostusväriä, ja kopioi sitten CSS.

Lähde: Selectors Level 4, W3C — spesifikaatio, joka määrittelee tämän tekniikan käyttämän :checked-pseudoluokan.

Miksi käyttää sitä?

• Live, klikattava esikatselu — kytke valintaruutu nähdäksesi tarkalleen, miltä valittu ja valitsematon tila näyttävät.
• Kolme erillistä, yleisesti käytettyä tyyliä yhdessä työkalussa: valintamerkkilaatikko, vaihtokytkin ja täytetty ympyrä.
• Taustalla oleva elementti pysyy aitona <input type="checkbox">-elementtinä, joten näppäimistönavigointi, lomakkeen lähetys ja ruudunlukijat toimivat normaalisti.
• Säädettävä koko ja korostusväri, luotuna suoraan CSS-arvoihin sen sijaan, että ne jätettäisiin täytettäviksi muuttujiksi.
• Ei kuvakefonttia, SVG-tiedostoa tai kuvaa tarvita — valintamerkki ja nuppi piirretään tavallisilla CSS-reunuksilla ja pseudoelementeillä.
• Ilmainen, toimii selaimessasi, ei rekisteröitymistä.

Käyttöohje

1. Valitse tyyli: pyöristetty valintamerkki, vaihtokytkin tai täytetty ympyrä.
2. Vedä kokoliukusäädintä skaalataksesi valintaruudun ylös- tai alaspäin.
3. Valitse korostusväri — tästä tulee valitun tilan tausta- ja reunusväri.
4. Napsauta valintaruutua esikatselupaneelissa varmistaaksesi, että sekä valittu että valitsematon tila näyttävät oikeilta.
5. Kopioi luotu CSS tyylitiedostoosi ja käytä sitä millä tahansa <input type="checkbox">-elementillä, joka on kääritty samalla tavalla kuin esikatselun merkintä.

Esimerkki

Syöte

Tyyli: pyöristetty valintamerkki · Koko: 24px · Väri: oranssi

Tuloste

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

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

Valintaruudun syöte on visuaalisesti piilotettu; näkyvä laatikko on sisar-<span>, joka on tyylitelty syötteen :checked-tilalla, ja pieni käännetty reunus piirretään valintamerkiksi valittuna.

Miksi piilottaa natiivi valintaruutu sen poistamisen sijaan

On houkuttelevaa ohittaa aito <input> ja rakentaa valintaruutu pelkästä tyylitellystä <div>-elementistä klikkauskäsittelijällä, mutta se menettää näppäimistötuen, lomakkeen lähetyksen ja ruudunlukijasemantiikan ilmaiseksi. Tämän työkalun luoma malli pitää aidon valintaruutu-syötteen merkinnässä — vain visuaalisesti piilotettuna opacity: 0 -arvolla ja uudelleensijoitettuna — jotta selain kohtelee sitä yhä aitona valintaruutuna kaikin merkityksellisin tavoin, samalla kun sisarelementti hoitaa näkyvän tyylityksen.

Kolme tyyliä lyhyesti

• Pyöristetty valintamerkki: tuttu neliö-ja-valintamerkki-kuvio, yleisin lomakekentissä, hyväksymisvalintaruuduissa ja monivalintalistoissa.
• Vaihtokytkin: näyttäytyy välittömänä päällä/pois-asetuksena lomakekentän sijaan — sopii parhaiten asetuksiin ja asetusnäkymiin valintaruutulistojen sijaan.
• Täytetty ympyrä: minimalistinen, valintanappimainen ulkoasu, hyödyllinen kun neliölaatikko tuntuisi visuaalisesti raskaalta pyöristettyjen käyttöliittymäelementtien vieressä.

Sovittaminen käyttöliittymän muuhun ilmeeseen

Luotu korostusväri vaikuttaa vain valittuun tilaan — valitse mikä tahansa brändi- tai painikeväri, jotta valintaruutu tuntuu yhtenäiseltä sivun muun osan kanssa. Yhdistä se samaan border-radius-arvoon, jota käytetään muualla käyttöliittymässä yhtenäisemmän ilmeen saamiseksi.

→ Border Radius -generaattori · Värivalitsin

Usein kysytyt kysymykset