Costume Checkbox & Radio With Pseudo Elements

You may have seen costume checkbox's and radio buttons. In this article I have shared a source code of costume checkbox's and radio buttons with you. Demo is available you can see the demo and the code is available if you want to implement these checkbox's in your web pages you simply have to copy the CSS code in the header section of your template code and HTML code you have to put where you want to see that costume checkbox or radio button.

I have previously shared these costume radio buttons but that were somehow difficult to understand and remember this time these checkbox's and radio buttons are made with pure CSS and do not require extra tags or elements to be added simply you have to make a span as a parent element and create input as children element of that span.

Below is the source code of these costume checkbox and radio input buttons you can see the source code below and the demo is also available.

Let's build Costume Checkbox & Radio With Pseudo Elements Now.

As you know the HTML code is vital for that so we should have some HTML code first. Below is the HTML code.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files only if there is any error with the working of code.

HTML code for Costume Checkbox & Radio With Pseudo Elements :

<div class="radio"><span><input type="radio" name="radio"></span><span><input type="radio" name="radio" checked></span></div><div class="check"><span><input type="checkbox" name="checkbox" checked></span><span><input type="checkbox" name="checkbox"></span></div> 

Attribute	Belongs to	Description
charset	<meta>, <script>	Specifies the character encoding
class	Global Attributes	Specifies one or more classnames for an element (refers to a class in a style sheet)
href	<a>, <area>, <base>, <link>	Specifies the URL of the page the link goes to
lang	Global Attributes	Specifies the language of the element's content
name	<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>	Specifies the name of the element
rel	<a>, <area>, <link>	Specifies the relationship between the current document and the linked document
type	<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>	Specifies the type of element

In the code above I have used to color black and and like green it's kind of yellowish green you can change this both colors according to your requirement whatever you like.

You don't have to change anything else if you change anything else then the whole button will be disturbed.
Without CSS our this script (Costume Checkbox & Radio With Pseudo Elements) will never look appealing. So here we are, our HTML code is ready now we have to personalize our HTML code and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Costume Checkbox & Radio With Pseudo Elements you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Costume Checkbox & Radio With Pseudo Elements :

.transition, input[type=radio]:after, input[type=checkbox][type=radio]:after, input[type=checkbox]:after{-moz-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);-o-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);-webkit-transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2);transition:all 0.25s cubic-bezier(0.75, 0.01, 0.48, 2)}.bgTransition, input[type=radio]:before, input[type=checkbox][type=radio]:before, input[type=checkbox]:before{-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;-webkit-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out}input[type=radio], input[type=checkbox]{position:relative}input[type=radio]:before, input[type=radio]:after, input[type=checkbox]:before, input[type=checkbox]:after{content:"";position:absolute}input[type=radio]:before, input[type=checkbox]:before{height:100%}input[type=radio][type=radio], input[type=checkbox][type=radio]{border-radius:30px}input[type=radio][type=radio]:before, input[type=checkbox][type=radio]:before{width:100%;border-radius:30px;background-color:#2c3f52;box-shadow:0 0 0 1px #2c3f52}input[type=radio][type=radio]:after, input[type=checkbox][type=radio]:after{width:100%;height:100%;border-radius:30px;background-color:#15202a;-moz-transform:scale(0, 0);-ms-transform:scale(0, 0);-webkit-transform:scale(0, 0);transform:scale(0, 0)}input[type=radio][type=radio]:checked:after, input[type=checkbox][type=radio]:checked:after{-moz-transform:scale(0.75, 0.75);-ms-transform:scale(0.75, 0.75);-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75)}input[type=radio][type=radio]:checked:before, input[type=checkbox][type=radio]:checked:before{background-color:#85ff7a;box-shadow:0 0 0 1px #85ff7a}input[type=radio][type=checkbox]:before, input[type=checkbox][type=checkbox]:before{width:200%;background-color:#2c3f52;box-shadow:0 0 0 1px #2c3f52;-moz-transform:translate(-25%, 0);-ms-transform:translate(-25%, 0);-webkit-transform:translate(-25%, 0);transform:translate(-25%, 0);border-radius:30px}input[type=radio][type=checkbox]:after, input[type=checkbox][type=checkbox]:after{width:80%;height:80%;margin-top:10%;margin-left:10%;background-color:#15202a;border-radius:30px;-moz-transform:translate(60%, 0);-ms-transform:translate(60%, 0);-webkit-transform:translate(60%, 0);transform:translate(60%, 0)}input[type=radio][type=checkbox]:checked:after, input[type=checkbox][type=checkbox]:checked:after{-moz-transform:translate(-60%, 0);-ms-transform:translate(-60%, 0);-webkit-transform:translate(-60%, 0);transform:translate(-60%, 0)}input[type=radio][type=checkbox]:checked:before, input[type=checkbox][type=checkbox]:checked:before{background-color:#85ff7a;box-shadow:0 0 0 1px #85ff7a}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input{display:block;margin:36px}input[type=radio], input[type=checkbox]{cursor:pointer;width:30px;height:30px}

These are some css selectors that are used in the above css code with their description and example.

Selector	Example	Example description
:checked	input:checked	Selects every checked <input> element
-webkit-	-webkit-color:red;	This prefix is used to specify style for any element On Chrome & Safari Browsers the color of text will be red.
-o-	-o-color:blue;	This prefix is used to specify style for any element On Opera Browser the color of text will be blue.
-moz-	-moz-color:green;	This prefix is used to specify style for any element On Mozilla or Firefox Browser the color of text will be green.
-ms-	-ms-color:yellow;	This prefix is used to specify style for any element On Internet Explorer Browser the color of text will be yellow.

Summary :

So here we are, We have done and our project Costume Checkbox & Radio With Pseudo Elements is ready now you can copy and combine all the codes provided above into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Costume Checkbox & Radio With Pseudo Elements) File :

Costume Checkbox & Radio With Pseudo Elements.zip

Download Started
( If Not Click Me )

File Size 3.34 KB

Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.
Thank you !

source:softwebtuts.com