Topcoat Checkboxes

Developer
Topcoat
Size
3,096 Kb
Views
14,168
  1. Topcoat Checkboxes Previews
  2. Topcoat Checkboxes HTML Codes
  3. Topcoat Checkboxes CSS Codes

How do I make an topcoat checkboxes?

What is a topcoat checkboxes? How do you make a topcoat checkboxes? This script and codes were developed by Topcoat on 20 September 2022, Tuesday.

Topcoat Checkboxes Previews
IQ Test

Topcoat Checkboxes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Topcoat Checkboxes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title"> Topcoat Checkboxes
</h1>
<p> Iterating on a simple, portable, and accessible css only solution for styling checkboxes.
</p>
<h2>Normal</h2>
<label class="topcoat-checkbox"> <input type="checkbox"> <div class="topcoat-checkbox__checkmark"></div>
</label>
<br>
<br>
<label class="topcoat-checkbox"> <input type="checkbox" disabled> <div class="topcoat-checkbox__checkmark"></div>
</label>
<div class="spacer"> <hr>
</div>
<h2>Accessibility</h2>
<p> The normal checkbox will work on modern browsers with modern screen readers. What follows is a bullet proof approach to make sure your checkbox is accessible for as many of your users as possible.
</p>
<label for="checkbox1" class="topcoat-checkbox"> <input id="checkbox1" aria-label="checkbox with aria-label" type="checkbox" aria-describedby="checkbox1-description"> <div class="topcoat-checkbox__checkmark"></div>
</label>
<br>
<br>
<label for="checkbox2" class="topcoat-checkbox"> label <input id="checkbox2" type="checkbox" aria-describedby="checkbox2-description"> <div class="topcoat-checkbox__checkmark"></div>
</label>
<br>
<br>
<label for="checkbox3" class="topcoat-checkbox"> <input id="checkbox3" aria-labelledby="checkbox3-label" aria-describedby="checkbox3-description" type="checkbox"> <div class="topcoat-checkbox__checkmark"></div> <span id="checkbox3-label">label</span>
</label>
<br>
<p id="checkbox1-description">The first checkbox doesn't have a label in text, which isn't recommended, but, depending on context, could be necessary, e.g. for a checkbox in a datagrid. We use the <code class="prettyprint">aria-label</code> attribute to make sure that the checkbox is properly labelled for assistive technology like screen readers.</p>
<p id="checkbox2-description">The second checkbox uses the <code class="prettyprint">for</code> attribute to explicitly associate the <code class="prettyprint">label</code> tag with the checkbox.</p>
<p id="checkbox3-description">The third checkbox uses the <code class="prettyprint">aria-labelledby</code> attribute to explicitly associate the checkbox with a <code class="prettyprint">span</code> that provides its label and the <code class="prettyprint">aria-describedby</code> attribute to associate the checkbox with this description.</p>
<p>To ensure that assistive technology knows the location of the checkbox, we don't use <pre class="prettyprint"> input[type=checkbox] { position: absolute; top: -9999px; left: -9999px; }</pre> to hide the checkbox offscreen. Instead we use the following, inspired by <a href="https://github.com/jquery/jquery-ui/blob/master/themes/base/jquery.ui.core.css#LC17">jQuery UI's .ui-helper-hidden-accessible class</a>, to hide the checkbox but retain its dimensions and position in the document. <pre class="prettyprint"> input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 2rem; margin: 0 -2rem -2rem 0; overflow: hidden; padding: 0; position: absolute; width: 2rem; opacity: 0.001; }</pre>
</p>
<script src="//use.edgefonts.net/source-sans-pro:n3,n4,n6;source-code-pro:n3.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</body>
</html>

Topcoat Checkboxes - Script Codes CSS Codes

body { padding: 0 50px; background-color: #f4f4f4; font-family: source-sans-pro, sans-serif;
}
.title { letter-spacing: -.065em
}
.spacer { padding: 25px 0;
}
input[type=checkbox] { border: 0;	clip: rect(0 0 0 0);	height: 2rem;	margin: 0 -2rem -2rem 0;	overflow: hidden;	padding: 0;	position: absolute;	width: 2rem; opacity: 0.001;
}
.topcoat-checkbox { position: relative; display: inline-block; line-height: 2rem; -webkit-user-select: none;	-moz-user-select: none;	-ms-user-select: none;	user-select: none;
}
.topcoat-checkbox__checkmark { display: inline-block; vertical-align: top; width: 2rem; height: 2rem; -webkit-user-select: none;	-moz-user-select: none;	-ms-user-select: none;	user-select: none;
}
/* Background */
.topcoat-checkbox__checkmark:before { content: ''; position: absolute; box-sizing: border-box;	width: 2rem;	height: 2rem; background: #e5e9e9;	border: 1px solid #a5a8a8;	border-radius: 3px; cursor: pointer;	-webkit-box-shadow: inset 0 1px #fff;	box-shadow: inset 0 1px #fff;
}
/* Checkmark */
.topcoat-checkbox__checkmark:after { opacity: 0;	content: '';	position: absolute; /* Length of check tail */ width: 28px; /* Lenght of check foot */ height: 11px;	background: transparent;	border: 7px solid #666666;	border-top: none;	border-right: none;	border-radius: 2px;	-webkit-transform: rotate(-50deg);	-moz-transform: rotate(-50deg);	-o-transform: rotate(-50deg);	-ms-transform: rotate(-50deg);	transform: rotate(-50deg);
}
:checked + .topcoat-checkbox__checkmark:after {	opacity: 1;
}
:focus + .topcoat-checkbox__checkmark:before { border: 1px solid #0940fd; -webkit-box-shadow: 0 0 0 2px #6fb5f1; box-shadow: 0 0 0 2px #6fb5f1;
}
:disabled + .topcoat-checkbox__checkmark:before { opacity: 0.3; cursor: default; pointer-events: none;
}
Topcoat Checkboxes - Script Codes
Topcoat Checkboxes - Script Codes
Home Page Home
Developer Topcoat
Username Topcoat
Uploaded September 20, 2022
Rating 3
Size 3,096 Kb
Views 14,168
Do you need developer help for Topcoat Checkboxes?

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!

Topcoat (Topcoat) Script Codes
Name
Topcoat Desktop Dark
Topcoat Onsen UI theme
Topcoat Mobile Button
Topcoat Switch
Topcoat Desktop Light
A Pen by Topcoat
Variables Dark
Topcoat Icomatic CDN icons
Variables Shared
Topcoat Button Bar
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!