iOS Style Animated Radio Buttons & Checkbox (CSS, jQuery)

Показать описание

Create iOS style radio buttons and checkboxes by using CSS and jQuery. Use jQuery to toggle checkbox and radio buttons. We have looked into how can we create CSS only radio buttons and checkboxes. We have looked into how can we create CSS and JavaScript based radio buttons and checkboxes. We have learned how can we create radio buttons and checkboxes where we have separate input and label tags. Where input is not inside label. We have learned how to create iOS style radio buttons and checkboxes by using only CSS. We have looked into how Tilda and Plus CSS selector help us in making useful CSS selections.

In this video we will create iOS style radio buttons and checkboxes by using CSS and jQuery. You do not need jQuery or JavaScript to create custom radio buttons and checkboxes because CSS is enough to do that. If input is inside label, clicking at label toggles radio buttons or checkboxes. If input is outside label, we can use tilda or plus CSS selector to toggle input radio buttons and checkboxes. We can use CSS pseudo classes to style custom radio buttons and checkboxes. So CSS is sufficient. But i am still going to show you how can you do it by using jQuery because in real web development you may need it atleast once in your life time :)

Let me give you few quick tips before that:

- Tilda CSS selector is used to select all elements next to an element
- Plus CSS selector is used to select only first next element to an element
- Even if input radio button or checkbox is not inside label, you can still use 'for' attribute in label and use relevant input's id to toggle that input when you click at label as well

Use input's ID in label as value for 'for' attribute. Input is placed outside label here. When we click at label, it's input will be toggled. So there are so many ways to do this.

We will create two groups of radio buttons and few checkboxes. Then we will apply iOS design and toggle them by using CSS and jQuery. Radio group have same 'name' value for each input in it. Our Input radio button is outside of label. We have outer wrapper class named as 'radios' enclosing all input radio buttons in a group. Each input radio button, along with its label is inside a class named as 'radio'.

Now, clicking at label won't toggle inputs because input is outside of label. Also we don't have label 'for' attribute and input 'id' to associate each label with its relevant input. So that is why we will use jQuery to toggle input radio buttons and checkboxes. We will use CSS to design checked and unchecked state. We will use jQuery to toggle another class for input that was clicked. Clicked input will be toggled.

Our label is at position relative because styled iOS button will use CSS pseudo elements with absolute position. Now we will design our iOS styles inputs in CSS / both - checked and unchecked states.

This is for regular style
.radio label::before { }
.radio label::after { }
.checkbox label::before { }
.checkbox label::after { }

Infact, we can combine these:

.radio label::before, .checkbox label::before { }
.radio label::after, .checkbox label::after { }

We will use CSS pseudo elements on label. At 'before pseudo element', we will use iOS button track. At 'after pseudo element' we will use a rounded button.

Now for the checked state
div with class name .radio and .active will represent active state. Radio input button or checkbox inside it will be checked.

CSS is done.
Now let's handle javascript part.
In document ready, we will use two functions

In functions first we will check if any radio button or checkbox has active class, if yes we will check actual input. Then we will handle click events for radio button and checkboxes. On click of a radio of checkbox we will remove active classes if need be and add active class to wrapper of clicked input or checkbox by using jQuery.

For animation, we will use CSS transition property. Then we will hide original radio buttons and checkboxes, because we have our own styles.

And this is how you can create iOS styled animated radio buttons and checkboxes by using CSS and jQuery.

- iOS Style Animated Radio Buttons & Checkbox (CSS Only)

- Hide CSS Code
- Smooth Scroll with CSS Only
- CSS Only Custom Radio Buttons and Checkboxes

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#webstylepress #tutorials #webdevelopment #jquery #js #javascript #csstutorial #css #html