Simple CSS Checkbox

Developer
Chris Burnell
Size
2,797 Kb
Views
66,792
  1. Simple CSS Checkbox Previews
  2. Simple CSS Checkbox HTML Codes
  3. Simple CSS Checkbox CSS Codes

How do I make an simple css checkbox?

Simple CSS-only checkbox. Revisited.Thanks to https://twitter.com/dansimau for the focus state suggestion!. What is a simple css checkbox? How do you make a simple css checkbox? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

Simple CSS Checkbox Previews
IQ Test

Simple CSS Checkbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple CSS Checkbox</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="jazzycheckbox" role="checkbox" aria-checked="false">
<label for="jazzycheckbox" class="check">Check me!</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Simple CSS Checkbox - Script Codes CSS Codes

@charset "UTF-8";
html,
body { height: 100%;
}
body { font: 600 20px/3em sans-serif; position: relative;
}
input[type="checkbox"] { opacity: 0; position: absolute; left: 0; bottom: 100%;
}
.check { background-color: lightgray; background-clip: padding-box; color: dimgray; display: block; padding: 0 2.5em; overflow: hidden; position: absolute; top: 50%; left: 50%; white-space: nowrap; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: .375em; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all .15s ease-in-out .1s; transition: all .15s ease-in-out .1s;
}
input[type="checkbox"]:focus + .check { box-shadow: 0 0 0 0.3em rgba(105, 105, 105, 0.8);
}
input[type="checkbox"]:checked + .check { background-color: darkseagreen; color: snow; padding-right: 1.5em; padding-left: 3.5em;
}
input[type="checkbox"]:checked:focus + .check { box-shadow: 0 0 0 0.3em rgba(105, 105, 105, 0.2);
}
.check:before { content: "✔"; color: snow; font-size: 1.5em; position: absolute; top: 0; left: 1em; -webkit-transform: translateX(-2em); transform: translateX(-2em); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out;
}
input[type="checkbox"]:checked + .check:before { -webkit-transform: none; transform: none; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
}
Simple CSS Checkbox - Script Codes
Simple CSS Checkbox - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3
Size 2,797 Kb
Views 66,792
Do you need developer help for Simple CSS 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!

Chris Burnell (chrisburnell) Script Codes
Name
Persistent Light Source Transform
Student Charter Demo for City University
Psychedelic Slice
Modal Container without JS
Slip-n-slide Modal
The power of transform for centering - INTERACTIVE
Globule Bleu Jobs Page Anchor Rollover Effect
Message Types
Interaction Jazz
Interesting Hover Animation
Create amazing web content 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!