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-ы көзге көрінбейтіндей жасырылған; көрінетін жәшік — input-тың :checked күйіне сай стильделген сыбайлас <span>, белгіленгенде белгі ретінде сызылатын кішкентай бұрылған жиегі бар.

Түпнұсқа checkbox-ты алып тастаудың орнына неге жасыру керек

Нақты <input>-ты өткізіп жіберіп, checkbox-ты толығымен стильделген <div> мен басу өңдеушісінен құру қызықты болып көрінуі мүмкін, бірақ бұл пернетақта қолдауын, форманы жіберуді және экран оқу құралдарының семантикасын тегін жоғалтады. Бұл құрал жасайтын үлгі нақты checkbox input-ын мазмұнда сақтайды — тек opacity: 0 арқылы көзге көрінбейтіндей жасырылып, қайта орналастырылады — сол арқылы браузер оны маңызды әр жағынан нағыз checkbox ретінде қарастыра береді, ал сыбайлас элемент көрінетін стильдеуді басқарады.

Үш стильге қысқаша шолу

• Дөңгеленген белгі: форма өрістері, келісім checkbox-тары және көп таңдау тізімдері үшін ең көп таралған, белгісі бар шаршы таныс үлгісі.
• Ауыстырғыш: форма өрісінен гөрі лезде қосу/өшіру параметрі ретінде қабылданады — checkbox тізімдерінен гөрі параметрлер мен баптаулар экрандары үшін жақсырақ.
• Толтырылған дөңгелек: жанындағы дөңгеленген UI элементтеріне қарсы шаршы жәшік визуалды ауыр көрінген кезде пайдалы, радио түймеге ұқсас минималды көрініс.

Оны интерфейсіңіздің қалғанына сәйкестендіру

Жасалған акцент түсі тек белгіленген күйге ғана әсер етеді — checkbox беттің қалған бөлігімен үйлесімді сезінуі үшін брендіңіздің немесе түймелеріңіздің түсін таңдаңыз. Оны интерфейстің басқа жерлерінде қолданылатын border-radius мәнімен ұштастырыңыз, бұл біртұтас көрініс береді.

→ Border Radius Generator

Жиі қойылатын сұрақтар