Izvēlnes izmērs labiem veidlapām

Šajā norādījumā uzzināsi, kā individuāli pielāgot savu tīmekļa veidlapu izvēles rūtiņu dizainu. Izvēles rūtiņas bieži nav tik pievilcīgas, kā gribētos, un tās iespējams neatbilst tavam krāsu shēmai vai motīvam. Izvēles rūtiņu standarta dizainu nav viegli mainīt. Tomēr ir dažādi veidi, kā pielāgot izskatu tā, lai labāk saskanētu ar tavu vietni.

Mērķis nav tikai panākt pievilcīgu dizainu, bet arī saglabāt izvēles rūtiņas funkcionalitāti. Šajā norādījumā soli pa solim skaidroju, kā stilizēt izvēles rūtiņas.

Svarīgākie atziņas

• Ir iespējams pielāgot izvēles rūtiņu izskatu, izmantojot CSS, paslēpjot standarta formu un izveidojot pielāgotu elementu.
• Iespējams izmantot CSS pseidoklases, lai attēlotu atšķirīgus dizainus izvēles rūtiņai, kad tā ir aktivizēta un neaktivizēta.
• Iespējams izmantot arī Unicode simbolus vai attēlus, lai izveidotu pievilcīgāku izvēles rūtiņu.

Pēc soļiem vadība

1. solis: Izveidot pirmo izvēles rūtiņu

Sākumā izveido vienkāršu izvēles rūtiņu savā HTML dokumentā. Izvēles rūtiņai ir standarta zilganā krāsā. Tas būs pamats, uz kura tu turpmāk būvēsi.

2. solis: Pielāgot fona krāsu

Lai pielāgotu izvēles rūtiņu savām vajadzībām, vari mainīt fona krāsu. Vari izmantot CSS īpašību, ko sauc par accent-color, lai iestatītu jaunu krāsu. Piemēram, uzstādi to uz sarkanu, lai redzētu, kāda izmaiņa notiek.

3. solis: Pielāgot izvēles rūtiņas izmēru

Pievienojoties krāsai, vari mainīt arī izvēles rūtiņas izmēru. Lielāka izvēles rūtiņa var labāk izskatīties tavā dizainā un padarīt to vieglāku lietošanā. To vari pielāgot ar CSS palīdzību.

4. solis: Izvēles rūtiņas aizstāvēšana ar paša elementu

Ja standarta atzīmei nepatīk, aizstāj izvēles rūtiņu ar paša elementu. To var izdarīt, paslēpjot iebūvēto ievades elementu un lietojot aizvietojuma span, ko pielāgo. Vispirms novērs stylingu no izvēles rūtiņas.

5. solis: Parastā stāvokļa rūtiņas izveide

Tagad pievieno span elementu, kas attēlo rūtiņu izvēlei. Iestatiet platumu un augstumu rūtiņai, balta rāmja krāsa un nodrošiniet, ka attālums pa labi ir pareizs, lai neradītu mijiedarbību ar citiem elementiem.

6. solis: Aktivizētā stāvokļa stilizācija

Lai mainītu aktivizētās izvēles rūtiņas dizainu, jāizmanto CSS pseidoklases. Kad izvēles rūtiņa ir atzīmēta, vari mainīt span. Izmanto :checked izvēlētāju, lai noteiktu, kas notiks ar rūtiņu aktivizētā stāvoklī. Lai to paveiktu, izmanto selektoru input:checked + .box un maini fona krāsu.

7. solis: Unicode simboli vērtībai

Vietā, lai būtu tikai krāsains lauciņš, vari pievienot arī atzīmi. Izmanto Unicode simbolu atzīmei un novieto to span. Lai to paveiktu, izmanto ::after pseido elementu, lai pievienotu simbolu un to atbilstoši stilizētu ar CSS.

8. solis: Veikt smalkus pielāgojumus

Lai nodrošinātu, ka atzīme izskatās labi, var būt nepieciešams novirzījumu un novietojumu pielāgot. Tas ir īpaši svarīgi, lai Unicode simbols labi izskatītos lauciņa centrā.

Solis 9: Izmanto alternatīvas attēlojumam

Vietā skaidrojošas atzīmes, vari izmantot attēlus, kas ļauj pielāgot izskatu. Vari ievietot vienu attēlu, ja izvēlne ir ieslēgta, un citu attēlu, ja tā ir izslēgta.

Solis 10: Pārbaudi darbību

Pārliecinies, ka izvēlnes funkcionalitāte tiek saglabāta arī pēc tās pielāgošanas. Tev ir jānodrošina, ka gan ievades elemnta redzamība, gan interaktivitāte tiek saglabāta, pat ja tas ir vizuāli paslēpts.

Kopsavilkums

Šajā vadlīnijā tu esi iemācījies, kā pielāgot izvēlnes savos tīmekļa veidlapās. Ar CSS pseudo-klasēm tu vari mainīt izvēlnes dizainu, padarot standarta izvēlni neredzamu un parādot savus pašas elementus. Unicode simbolu un attēlu izmantošana sniedz daudz radošu iespēju.