Simple CSS Checkbox

Developer
Chris Burnell
Size
3,244 Kb
Views
50,600
  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.I’ve revisited this: http://codepen.io/chrisburnell/pen/Cbiun. 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/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
html,
body { height: 100%;
}
html { font-family: "Helvetica Neue", Arial, serif; font-size: 18px; font-weight: bold;
}
body { background-color: #e9e9e9; display: flex; align-items: center; justify-content: center; position: relative;
}
input { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; position: absolute !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important;
}
label { background-color: mintcream; color: #4f4f4f; display: block; padding: 0 2em; position: relative; overflow: hidden; text-align: center; cursor: pointer; border-radius: 5%; transition: all 0.2s ease-in-out; line-height: 3;
}
label:after { background-color: rgba(0, 0, 0, 0.2); color: #efefef; width: 1.5em; display: none; position: absolute; left: 0; content: "✔"; font-size: 2em; line-height: 1.5; text-align: center; border-radius: 5% 0 0 5%;
}
input:checked + label { background-color: green; color: #efefef; padding-left: 3.5em; padding-right: 1.0em;
}
input:checked + label:after { display: inline;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div> <input type="checkbox" id="a"> <label for="a">Check me!</div>
</div>
</body>
</html>

Simple CSS Checkbox - Script Codes CSS Codes

@charset "UTF-8";
html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
html,
body { height: 100%;
}
html { font-family: "Helvetica Neue", Arial, serif; font-size: 18px; font-weight: bold;
}
body { background-color: #e9e9e9; display: flex; align-items: center; justify-content: center; position: relative;
}
input { width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; position: absolute !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important;
}
label { background-color: mintcream; color: #4f4f4f; display: block; padding: 0 2em; position: relative; overflow: hidden; text-align: center; cursor: pointer; border-radius: 5%; transition: all 0.2s ease-in-out; line-height: 3;
}
label:after { background-color: rgba(0, 0, 0, 0.2); color: #efefef; width: 1.5em; display: none; position: absolute; left: 0; content: "✔"; font-size: 2em; line-height: 1.5; text-align: center; border-radius: 5% 0 0 5%;
}
input:checked + label { background-color: green; color: #efefef; padding-left: 3.5em; padding-right: 1.0em;
}
input:checked + label:after { display: inline;
}
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 3,244 Kb
Views 50,600
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
Modal Container without JS
Interesting Hover Animation
Interaction Jazz
Square Illusion
Slip-n-slide Modal
Globule Bleu Jobs Page Anchor Rollover Effect
The Importance of Proper Navigational CSS
Category Hover Demo
Zoomy Anchor Thing
The power of transform for centering
Create amazing blog posts 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!