Css все элементы checkbox

Стилизация Checkbox

Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.

Метод «Checkbox Hack»

Основан на связи и помещенного в него инпута, т.е. по клику на него, инпут будет менять свое состояние.

Стоит заменить что в некоторых старых браузерах (например Safari) такой приём не работает и требует добавление атрибутов for у и id у чекбокса.

В зависимости от состояния чекбокса :checked , :disabled и :focus , следующему за ним элементу, например , можно задавать стили с помощью селектора « + ».

/* Dafault */ label input[type=checkbox] + span < . >/* Focus */ label input[type=checkbox]:focus + span < . >/* Checked */ label input[type=checkbox]:checked + span < . >/* Disabled */ label input[type=checkbox]:disabled + span < . >label input[type=checkbox]:disabled:checked + span

Сам чекбокс скрывается, но без использования display: none , что бы оставить функциональность фокуса.

По умолчанию, фокус появляется при клике на элемент, что не очень и нужно. Оставить выделение при фокусе только при нажатии клавиши Tab можно с помощью JQuery, добавляя класс focused родительскому элементу.

$(window).keyup(function(e) < var target = $('label input[type=checkbox]:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('label input[type=checkbox]').focusout(function()< $(this).parent().removeClass('focused'); >);

Пример №1

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

HTML-разметка:

 Checkbox #1  Checkbox #2  Checkbox #3  Checkbox #4 

Фокус по клавише Tab:

$(window).keyup(function(e) < var target = $('.checkbox-other input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-other input').focusout(function()< $(this).parent().removeClass('focused'); >);

CSS-стили:

.checkbox-other < display: block; margin: 0 0 10px 0; cursor: pointer; user-select: none; position: relative; >.checkbox-other input[type=checkbox] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-other span < display: inline-block; position: relative; padding: 0 0 0 35px; line-height: 22px; >.checkbox-other span:before < content: ""; display: inline-block; width: 22px; height: 22px; position: absolute; left: 0; top: 0; transition: background 0.3s ease; background: url(/checkbox-1.png) 0 0 no-repeat; >/* Checked */ .checkbox-other input[type=checkbox]:checked + span:before < background-image: url(/checkbox-2.png); >/* Focus */ .focused span:before < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-other span:hover:before < filter: brightness(110%); >/* Active */ .checkbox-other span:active:before < filter: brightness(80%); >/* Disabled */ .checkbox-other input[type=checkbox]:disabled + span < color: #666; cursor: default; >.checkbox-other input[type=checkbox]:disabled + span:before

Результат:

Пример №2

Подходит для случаев, когда галка выходит за края элемента. HTML-разметка и JS-код остается прежними.

.checkbox-other < display: block; margin: 0 0 10px 0; cursor: pointer; user-select: none; position: relative; >.checkbox-other input[type=checkbox] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-other span < display: inline-block; position: relative; padding: 0 0 0 35px; line-height: 22px; >.checkbox-other span:before < content: ""; display: inline-block; width: 22px; height: 22px; position: absolute; left: 0; top: 0; background: url(/checkbox-3.png) 0 0 no-repeat; >/* Checked */ .checkbox-other input[type=checkbox] + span:after < content: ""; opacity: 0; transition: opacity 0.3s ease; >.checkbox-other input[type=checkbox]:checked + span:after < display: inline-block; width: 22px; height: 22px; position: absolute; left: 4px; top: -5px; background: url(/checkbox-4.png) 0 0 no-repeat; opacity: 1; >/* Focus */ .focused span:before < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-other span:hover:after < filter: brightness(110%); >/* Active */ .checkbox-other span:active:before, .checkbox-other span:active:after < filter: brightness(80%); >/* Disabled */ .checkbox-other input[type=checkbox]:disabled + span < color: #666; cursor: default; >.checkbox-other input[type=checkbox]:disabled + span:before, .checkbox-other input[type=checkbox]:disabled + span:after

Источник

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!

Источник