CSS izvēles rūtiņas ģenerators

Kas ir šis rīks?

Pārlūka noklusējuma izvēles rūtiņas izskatās atšķirīgi katrā pārlūkā, un tās ir grūti pārveidot tieši, jo to iebūvēto izskatu zīmē operētājsistēma, nevis tīrs CSS. Standarta risinājums ir vizuāli paslēpt oriģinālo izvēles rūtiņu un noformēt blakus esošo elementu, kas balstīts uz izvēles rūtiņas :checked stāvokli — ievades lauks paliek pilnībā funkcionāls un pieejams, mainās tikai tā izskats.

Šis rīks izveido šo modeli trim izplatītiem izvēles rūtiņu stiliem: noapaļotai rūtiņai ar animētu ķeksīti, iOS stila slīdošam pārslēdzējam un aizpildītam aplim (radio pogas veida) stilam. Noklikšķini uz izvēles rūtiņas priekšskatījumā, lai redzētu atzīmēto stāvokli, pielāgo izmēru un akcenta krāsu, tad kopē CSS.

Avots: Selectors Level 4, W3C — specifikācija, kas definē :checked pseidoklasi, uz kuru balstās šī tehnika.

Kāpēc to izmantot?

• Tiešraides, klikšķināma priekšskatījuma — pārslēdz izvēles rūtiņu, lai redzētu, kā tieši izskatās atzīmētais un neatzīmētais stāvoklis.
• Trīs atšķirīgi, plaši izmantoti stili vienā rīkā: ķeksīša rūtiņa, pārslēdzējs un aizpildīts aplis.
• Pamatā esošais elements paliek īsts <input type="checkbox">, tāpēc tastatūras navigācija, formas iesniegšana un ekrāna lasītāji turpina darboties normāli.
• Pielāgojams izmērs un akcenta krāsa, ģenerēts tieši CSS vērtībās, nevis atstāts kā mainīgie, kas jāaizpilda pašam.
• Nav vajadzīgs ikonu fonts, SVG fails vai attēls — ķeksītis un slīdnis tiek zīmēti ar vienkāršām CSS apmalēm un pseidoelementiem.
• Bezmaksas, darbojas tavā pārlūkā, nav reģistrācijas.

Kā to lietot

1. Izvēlies stilu: noapaļotu ķeksīti, pārslēdzēju vai aizpildītu apli.
2. Velc izmēra slīdni, lai palielinātu vai samazinātu izvēles rūtiņu.
3. Izvēlies akcenta krāsu — tā kļūs par atzīmētā stāvokļa fona un apmales krāsu.
4. Noklikšķini uz izvēles rūtiņas priekšskatījuma panelī, lai pārliecinātos, ka gan atzīmētais, gan neatzīmētais stāvoklis izskatās pareizi.
5. Kopē ģenerēto CSS savā stilu failā un izmanto to jebkurā <input type="checkbox">, kas ietverts tāpat kā priekšskatījuma marķējumā.

Piemērs

Ievade

Stils: noapaļots ķeksītis · Izmērs: 24px · Krāsa: oranža

Izvade

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

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

Izvēles rūtiņas ievades lauks ir vizuāli paslēpts; redzamā rūtiņa ir blakus esošs <span>, kas noformēts ar ievades lauka :checked stāvokli, ar nelielu pagrieztu apmali, kas iezīmēta kā ķeksītis, kad rūtiņa ir atzīmēta.

Kāpēc paslēpt oriģinālo izvēles rūtiņu, nevis to noņemt

Ir vilinoši izlaist īsto <input> un veidot izvēles rūtiņu tikai no noformēta <div> ar klikšķa apstrādātāju, taču tā tiek zaudēts tastatūras atbalsts, formas iesniegšana un ekrāna lasītāju semantika bez maksas. Šī rīka ģenerētais modelis saglabā īsto izvēles rūtiņas ievades lauku marķējumā — tikai vizuāli paslēptu ar opacity: 0 un pārvietotu — tāpēc pārlūks joprojām uztver to kā īstu izvēles rūtiņu visos svarīgajos aspektos, kamēr blakus esošais elements uzņemas redzamo noformējumu.

Trīs stili īsumā

• Noapaļots ķeksītis: pazīstams kvadrāta-ar-ķeksīti raksts, visbiežāk sastopams formu laukos, piekrišanas rūtiņās un vairāku izvēļu sarakstos.
• Pārslēdzējs: uztverams kā tūlītējs ieslēgts/izslēgts iestatījums, nevis formas lauks — vislabāk der iestatījumu ekrāniem, nevis izvēles rūtiņu sarakstiem.
• Aizpildīts aplis: minimālistisks, radio pogai līdzīgs izskats, noderīgs, ja kvadrāta rūtiņa izskatītos vizuāli smaga blakus noapaļotiem UI elementiem.

Pielāgošana pārējam UI

Ģenerētā akcenta krāsa ietekmē tikai atzīmēto stāvokli — izvēlies tādu, kāds ir tavas zīmola vai pogas krāsa, lai izvēles rūtiņa saskanētu ar pārējo lapu. Kombinē to ar to pašu border-radius vērtību, kas izmantota citur saskarnē, lai iegūtu vienotāku izskatu.

→ Border Radius ģenerators · Krāsu izvēlne

Biežāk uzdotie jautājumi