Super simple CSS custom checkbox

Developer
Sébastien Lombard
Size
2,990 Kb
Views
109,296
  1. Super simple CSS custom checkbox Previews
  2. Super simple CSS custom checkbox HTML Codes
  3. Super simple CSS custom checkbox CSS Codes

How do I make an super simple css custom checkbox?

Use labels "for" to check and uncheck checkboxes, hide the real checkboxes then style your label.. What is a super simple css custom checkbox? How do you make a super simple css custom checkbox? This script and codes were developed by Sébastien Lombard on 16 September 2022, Friday.

Super simple CSS custom checkbox Previews
IQ Test

Super simple CSS custom checkbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Super simple CSS custom checkbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='css/https___codepen_io_sebl_p.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="title"> <h1><i class="ion-ios7-checkmark"></i> Super simple CSS custom checkbox</h1> <p>Works with radio buttons too.</p>
</header>
<input type="checkbox" id="myCheckbox"/>
<label for="myCheckbox"> <i class="ion-ios7-checkmark"></i> Click me!
</label>
<h2>With checkbox visible so you can see how it reacts</h2>
<input type="checkbox" id="myCheckbox2"/>
<label for="myCheckbox2"> <i class="ion-ios7-checkmark"></i> Click me!
</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Super simple CSS custom checkbox - Script Codes CSS Codes

body { text-align: center; font-family: sans-serif;
}
h2 { text-transform: uppercase; margin: 4rem 0 2rem 0;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"] + label { -webkit-transition: all 300ms ease; transition: all 300ms ease; font-size: 2rem; cursor: pointer; border-radius: 0.3rem; background-color: #ecf0f1; padding: 0.5rem 1rem; display: inline-block; -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
input[type="checkbox"] + label i { color: #bdc3c7;
}
input[type="checkbox"]:checked + label { -webkit-transition: all 300ms ease; transition: all 300ms ease; background-color: #2ecc71;
}
input[type="checkbox"]:checked + label i { color: white; -webkit-animation: check 1s; animation: check 1s;
}
#myCheckbox2 { display: inline;
}
Super simple CSS custom checkbox - Script Codes
Super simple CSS custom checkbox - Script Codes
Home Page Home
Developer Sébastien Lombard
Username SebL
Uploaded September 16, 2022
Rating 4.5
Size 2,990 Kb
Views 109,296
Do you need developer help for Super simple CSS custom checkbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sébastien Lombard (SebL) Script Codes
Name
SoundCloud Mini player with css record animation
Responsive grid template editor concept
NgServerMessages
ES6 Class to get query params in string url or array of string urls
Simple 2 sides title animation
Perspective modal window
Bloc hover animation
Super quick responsive parametric grid generator with SASS
Handles
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!