Код для галочки css

Стилизация флажков (чекбоксов) в CSS

Наверняка вы задумались о том, как можно изменить стандартный вид флажков (чекбоксов), чтобы они выглядели привлекательней с учетом дизайна вашего сайта или задач одной конкретной страницы. В этой статье вы найдете ряд практических примеров, которые помогут вам стилизовать элементы . Для начала разберем пример, который имеет вид переключателя. Давайте посмотрим, как можно стилизовать флажки на примере, который в html-разметке содержит только и :

Теперь рассмотрим CSS-стили:

Если проанализировать код CSS, то видно, что элемент input мы прячем (свойство display: none), а все остальные стили прописаны для элемента label , а также псевдоэлементов label::before и label::after. Изменения внешнего вида также осуществляются для псевдокласса :checked, который имеет смысл использовать для флажков и радио-кнопок.

Еще ряд похожих вариантов с анимацией вам предлагает Himalaya Singh в своем примере.

See the Pen Simple CSS Checkbox by Tristan White (@triss90) on CodePen.18892

Примеры стилизации флажков с ресурса codepen.io

Как работает стилизация

В этом примере видно, где расположен флажок, который обычно скрывается с помощью свойства display: none, и как стилизованы label . Откройте вкладку CSS и проанализируйте код.

Простое решение для флажков и переключателей от Jon Kantner.

Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf

Зачеркивание при выборе флажка с анимацией

Несколько интересных решений для флажков и переключателей от Brad Bodine

See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.18892

Несколько похожих переключений состояний чекбокса от Olivia Ng

Разные виды переключателей от Mauricio Allende

Анимированное переключение состояний флажка в виде пилюли

Круглая кнопка с анимацией от mandycodestoo

See the Pen 100dayscss-66 by @mandycodestoo (@mandycodestoo) on CodePen.18892

Анимация текста флажков и радио-кнопок от Raúl Barrera

Подсветка текста label + анимация выбора чекбокса от Adam Quinlan

See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.18892

Анимированные флажки с изменением цвета на основе css-переменных от Stas Melnikov

Анимация флажков с переворотом

Анимация флажков и переключателей в стиле Material Design от Matt Sisto

Перекатывающийся шарик от Jon Kantner

See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2 со скрепкой

Карандаш для отметки выбора флажка

Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.

Меняем цветовую схему переключателем

Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.

Переключатель энергии

See the Pen Blocky Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Реализация аккордеона на чистом CSS с использованием чекбоксов от Alex Bergin

Переключатель цены от Aniruddha Banerjee

See the Pen Pricing Card Design by Aniruddha Banerjee (@imanirudh1) on CodePen.0

Выбор группы иконок от Håvard Brynjulfsen

Использование переключателя для показа скрытого контента

Скрытый checkbox нужен для отображения блока с информацией, которая не видна изначально. Автор Lisi.

Сложные примеры

Оказывается, флажки (чекбоксы) можно стилизовать так, что пользователи вряд ли догадаются о том, что используют именно эти элементы.

Шестеренки в переключателе с анимацией

Флажок-выключатель

Отличная стилизация в виде выключателя с внутренней подсветкой от Yoav Kadosh.

Лампа-переключатель

Вариант попроще внешне от Jon Kantner, но в коде вы найдете очень меого правил.

Флажок-переключатель

Настоящий переключатель от Jon Kantner. Здесь использован не только CSS, но и JS-код.

Еще один вариант 3D-переключателя

3D-трансформации с анимацией

Глядя на этот пример, понимаешь, что стилизация переключателей — это наименьшее из того, что сделал автор Ivan Grozdic . Отличный вариант для туристического сайта в плане выбора услуг.

See the Pen Pricing — pure css — #16 by Ivan Grozdic (@ig_design) on CodePen.18892

Пример генератора пароля с использованием флажков

ToDo List (список дел) от Will Boyd

Интересно то, что при отметке чекбокса вы получаете список дел с подсчетом сделанных и несделанных заданий на основе только лишь CSS, совсем без JavaScript-кода, за счет использования свойства counter-increment и свойства order Flexbox-модели.

И еще один ToDo List от Daniel Ramos

Только CSS, без JavaScript

See the Pen To do List + CSS by Daniel Ramos (@DanielRamos) on CodePen.0

Бонус. Невключаемый чекбох

Для тех, кто дочитал до конца — бонус — чекбокс, который нельзя оставить включенным, так как вы рассердите мишку. Он даже рычать умеет и хмурить брови. Наслаждайтесь ))) Написано на React. Автор Jhey.

Источник

15+ Amazing CSS Checkbox Styles to Check Out

You would have already used a checkbox on a website, mobile app or any touch screen device — they are so essential to any user interface.

You’ll find checkboxes all over: websites use them on forms and many sections within a carefully designed UI. Checkboxes are very common for yes or no questions and for confirming you have read the terms and conditions.

Looking for Toggle switches? Then check out our list of 20+ CSS Toggle Switches

By default, browsers have their own UI style, but you can use CSS to style the checkbox and create a unique look for your website or app.

With all the different platforms, devices and UI styles you may have noticed there are lots of checkbox styles, that is what this article is about: showing off some amazing CSS checkbox styles.

15+ Amazing CSS Checkbox Styles You Can Use

Everything you see here, you can use yourself and implement these styles into your own projects, get inspired and make your website look unique.

1. Custom Gradient Checkbox

Gradients can be a great way to make certain elements or backgrounds stand out and here we have a custom gradient as the background of the checkbox — very catchy and appealing.

The checkbox styles here are animated and there are two types, click them and check them out! Very unique and the animation is smooth and doesn’t take too long to complete.

2. Neumorphism Checkbox

A flat themed design checkbox style with animated states in the form of a toggle button. The animation is very snappy and feels modern, you can easily change the colour of the different on and off states yourself.

Great for a Neumorphism themed website design if that is what you are going for.

3. Fancy Animated CSS Checkbox

The default UI style that comes with any browser for checkboxes is functional but they look boring — this custom checkbox style takes it to a whole new level, the whole thing is animated from its different states.

The animation is smooth, catchy and looks awesome. In this example, there is even a fancy animated background to complement it, which might inspire you to use that as well.

4. Collection of Animated CSS Checkbox Styles

Here we have another collection of CSS checkbox styles, 3 sets of unique checkboxes that you can use and edit to suit your own brand colours.

The first set has hover effects to make them more engaging, the second set is your more traditional slider switches and the third set is the same but uses a different style.

5. Collection Of CSS Checkboxes

Try these styles out for yourself, just CSS is used to create these unique styles, so it will be easy to copy over the style for yourself.

There are 9 different styles all together in this one CodePen and they all follow a similar colour and look, so you could easily use them as a house style for your website if you like the look.

6. Selection Of Simple CSS Checkboxes

An amazing total of 30 simple CSS checkbox styles with all different animations, designs and types. They are all generally simple and very minimal, so they would work well on a flat themed website.

There are some really great options here and they are all fantastic!

7. Animated Checkboxes

A set of animated CSS checkbox styles, by the name of each checkbox you can see the different types of animation they have.

Very modern and minimal design, you can change the colour yourself in the CSS to match your website’s colour/branding.

8. Radio and Checkbox Styles

Radio buttons are closely related to checkboxes but here we have styles for both radio and checkboxes.

It uses a custom CSS checkbox style and a smooth animation fades and slides in the checkbox mark.

9. SVG Animated CSS Checkboxes

If you are looking for a more cartoony look and style for a checkbox, these SVG based animated checkboxes will do the trick.

They use SVGs to display the custom pen written to look and feel and there are over 5 types to choose from and no JavaScript as well, so they are very lightweight.

10. Quick CSS Checkbox Styles

There are 3 different types and 3 examples on each row, so you can try out what it looks like with multiple displayed on the screen.

It is good to have the same style but different animations, you could even change the colour from white to your own brand style to make these even more unique. But overall, the animations are smooth and everything is lightweight.

11. Animated Slider Toggle Checkbox

Custom checkboxes are popularly represented as a toggle, as either on or off and these animated switch toggle buttons are just that.

They look great, the colours can be changed and the sizes can be altered very easily as you can see from the example. Try one out and click one!

12. Windows 10 Inspired Checkbox Menu

A basic layout for a Windows 10 inspired menu with checkbox styles that you can use — great if you really enjoy the Windows 10 look.

This example is really useful because even though it has some modern and sleek looking CSS checkbox styles, you can see what they might look like in a minimal menu.

13. Smooth Custom Toggle Switches

You usually see checkboxes being used when you have to confirm you have read the terms and conditions of a website when you create an account somewhere. This example shows you what they look like in that form.

Once clicked, the slide is animated and very smooth, the colour changes from red to green to indicate that this option is selected.

14. Basic Checkbox Styles With Custom Colours

A more basic example but these CSS checkbox styles look super modern and minimal, kind of like the Bootstrap checkboxes you see but everything is ready for you to copy over in CSS.

The text is also part of the checkbox element, so this makes it much easier to click them. Here, there are 3 different colours but you could easily edit the CSS to use any colour to match your own brand style.

15. VueJS Based UI CSS Checkboxes

VueJS is a progressive JavaScript framework that you can use to build event-driven UI elements. But here we have a very fancy example of how you can match together VueJS and CSS to create unique UI elements — Specifically checkboxes but there are other UI elements as well.

This is a very full-on example and the JavaScript is also very simple and easy to understand. But as you can see, there are many checkbox styles included in this.

16. Switch and Box Style

Two CSS checkbox styles here, the first one is a traditional switch/toggle that uses a smooth animation to switch between stages, and there is also an on and off symbol in the background of the element.

Then we have a normal box-shaped checkbox but instead of a tick, it filled up the box using a smooth animation.

17. Background Checkbox With Icon

Something a little different compared to the traditional checkbox or toggle switch design, here we can see how useful a checkbox can be when paired with a background and a large icon for selection purposes.

In this example, we have radio buttons as well with the same style, a great example of how a checkbox can be extended and used differently.

How Do I Style A Checkbox In CSS?

You can style HTML checkbox using with CSS. The default browser look for checkboxes is functional but lack styling, so by using CSS to edit the style you can create a unique look.

How Do I Increase The Width And Height Of Checkbox In HTML?

You can increase the size of a checkbox by using the transform property of CSS and the scale function.

.my-checkbox  
transform: scale(2);
>

You might also have to add some margin-right if you have a label or text next to it.

Related Articles

Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/

Join 2,000+ readers and learn something new every month!

Источник