CSS Checkbox Generator

რა არის ეს ხელსაწყო?

ბრაუზერის ნაგულისხმევი checkbox-ები სხვადასხვა ბრაუზერში სხვადასხვანაირად გამოიყურება და მათი პირდაპირი გადამორგება რთულია, რადგან მათი ჩაშენებული გარეგნობა ოპერაციული სისტემის მიერ იხატება და არა ჩვეულებრივი CSS-ით. სტანდარტული გამოსავალია ორიგინალი checkbox-ის ვიზუალურად დამალვა და მის ნაცვლად მეზობელი ელემენტის სტილიზება, checkbox-ის :checked მდგომარეობის მიხედვით — input სრულად ფუნქციური და ხელმისაწვდომი რჩება, იცვლება მხოლოდ მისი გარეგნობა.

ეს ხელსაწყო აგებს ამ ნიმუშს სამი გავრცელებული checkbox სტილისთვის: მომრგვალებული ველი ანიმირებული ჩექმარკით, iOS-ის სტილის მოსრიალე გადამრთველი და შევსებული წრე (რადიობუტონის მსგავსი). დააწკაპუნეთ checkbox-ზე გადახედვის ველში, რომ ნახოთ მონიშნული მდგომარეობა, დაარეგულირეთ ზომა და აქცენტის ფერი, შემდეგ დააკოპირეთ CSS კოდი.

წყარო: Selectors Level 4, W3C — სპეციფიკაცია, რომელიც განსაზღვრავს :checked ფსევდო-კლასს, რომელზეც ეს ტექნიკა დაფუძნებულია.

რატომ გამოვიყენო ის?

• ცოცხალი, დაწკაპუნებადი გადახედვა — გადართეთ checkbox, რომ ზუსტად ნახოთ, როგორ გამოიყურება მონიშნული და მოუნიშნავი მდგომარეობა.
• სამი განსხვავებული, ხშირად გამოყენებული სტილი ერთ ხელსაწყოში: ჩექმარკიანი ველი, გადამრთველი და შევსებული წრე.
• ძირითადი ელემენტი რჩება ნამდვილი <input type="checkbox">, ასე რომ კლავიატურით ნავიგაცია, ფორმის გაგზავნა და ეკრანის წამკითხველები ჩვეულებრივად აგრძელებენ მუშაობას.
• რეგულირებადი ზომა და აქცენტის ფერი, გენერირებული პირდაპირ როგორც მნიშვნელობები CSS-ში, ცვლადების სახით დასატოვების ნაცვლად.
• არ არის საჭირო ხატულების ფონტი, SVG ფაილი ან სურათი — ჩექმარკი და სახელური დახატულია მარტივი CSS ჩარჩოებითა და ფსევდო-ელემენტებით.
• უფასოა, მუშაობს თქვენს ბრაუზერში, რეგისტრაციის გარეშე.

როგორ გამოვიყენო

1. აირჩიეთ სტილი: მომრგვალებული ჩექმარკი, გადამრთველი ან შევსებული წრე.
2. გადაათრიეთ ზომის სლაიდერი checkbox-ის გასადიდებლად ან შესამცირებლად.
3. აირჩიეთ აქცენტის ფერი — ის გახდება მონიშნული მდგომარეობის ფონისა და საზღვრის ფერი.
4. დააწკაპუნეთ checkbox-ზე გადახედვის პანელში, რომ დაადასტუროთ, რომ მონიშნული და მოუნიშნავი მდგომარეობა ორივე სწორად გამოიყურება.
5. დააკოპირეთ გენერირებული CSS თქვენს სტილთა ფურცელში და გამოიყენეთ ის ნებისმიერ <input type="checkbox">-ზე, რომელიც იმავე გზით არის შეფუთული, როგორც გადახედვის მარკაპი.

მაგალითი

შეყვანა

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

შედეგი

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

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

checkbox-ის input ვიზუალურად დამალულია; ხილული ველი არის მეზობელი <span>, სტილიზებული input-ის :checked მდგომარეობის მიხედვით, პატარა შემობრუნებული საზღვრით, რომელიც ჩექმარკად იხატება მონიშვნისას.

რატომ დავმალოთ ორიგინალი checkbox მისი წაშლის ნაცვლად

მაცდურია გამოვტოვოთ ნამდვილი <input> და checkbox მთლიანად სტილიზებული <div>-ისა და დაწკაპუნების დამმუშავებლისგან ავაშენოთ, მაგრამ ასე უფასოდ იკარგება კლავიატურის მხარდაჭერა, ფორმის გაგზავნა და ეკრანის წამკითხველების სემანტიკა. ნიმუში, რომელსაც ეს ხელსაწყო აგენერირებს, ინარჩუნებს ნამდვილ checkbox input-ს მარკაპში — უბრალოდ ვიზუალურად დამალულია opacity: 0-ით და გადანაცვლებულია — ისე, რომ ბრაუზერი მას ისევ ნამდვილ checkbox-ად აღიქვამს ყველა მნიშვნელოვან ასპექტში, სანამ მეზობელი ელემენტი ხილულ სტილიზაციას უზრუნველყოფს.

სამი სტილი მოკლედ

• მომრგვალებული ჩექმარკი: ნაცნობი ნიმუში — კვადრატი ჩექმარკით, ყველაზე ხშირად გამოყენებული ფორმის ველებისთვის, დათანხმების checkbox-ებისა და მრავალარჩევანიანი სიებისთვის.
• გადამრთველი: აღიქმება როგორც მყისიერი ჩართვა/გამორთვის პარამეტრი და არა ფორმის ველი — საუკეთესოა პრეფერენციებისა და პარამეტრების ეკრანებისთვის, ვიდრე checkbox-ების სიებისთვის.
• შევსებული წრე: მინიმალისტური, რადიობუტონის მსგავსი გარეგნობა, სასარგებლო მაშინ, როცა კვადრატული ველი ვიზუალურად მძიმედ ჩანდება მიმდებარე მომრგვალებული UI ელემენტების გვერდით.

დანარჩენ UI-სთან შესაბამისობაში მოყვანა

გენერირებული აქცენტის ფერი მხოლოდ მონიშნულ მდგომარეობაზე მოქმედებს — აირჩიეთ ის ფერი, რომელიც თქვენი ბრენდის ან ღილაკების ფერს შეესაბამება, რომ checkbox გვერდის დანარჩენ ნაწილთან თანმიმდევრული იყოს. შეუთავსეთ იგივე border-radius, რომელიც სხვაგან გამოიყენება ინტერფეისში, უფრო ერთიანი გარეგნობისთვის.

→ Border Radius Generator

ხშირად დასმული კითხვები