Checkbox

Developer
Cory Schadt
Size
2,407 Kb
Views
18,216
  1. Checkbox Previews
  2. Checkbox HTML Codes
  3. Checkbox CSS Codes

How do I make an checkbox?

What is a checkbox? How do you make a checkbox? This script and codes were developed by Cory Schadt on 05 December 2022, Monday.

Checkbox Previews
IQ Test

Checkbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Checkbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="test1" /> <label for="test1">Red</label>
</body>
</html>

Checkbox - Script Codes CSS Codes

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked { position: absolute; left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label { position: relative; padding-left: 1.95em; cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 1px solid #000; background: #fff;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after { content: '✓'; position: absolute; top: .15em; left: .20em; font-size: 1.3em; line-height: 0.8; color: #09ad7e; transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after { opacity: 0;
}
[type="checkbox"]:checked + label:after { opacity: 1;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before { border-color: #bbb; background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after { color: #999;
}
[type="checkbox"]:disabled + label { color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before { border: 1px solid blue;
}
/* hover style just for information */
label:hover:before { border: 1px solid #4778d9!important;
}
Checkbox - Script Codes
Checkbox - Script Codes
Home Page Home
Developer Cory Schadt
Username coryschadt
Uploaded December 05, 2022
Rating 3
Size 2,407 Kb
Views 18,216
Do you need developer help for 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!

Cory Schadt (coryschadt) Script Codes
Name
FlexBox Mixin
Vertical Slick Slider
Wordpress - archives for CPT
Jquery cycle2 youtube
Chair Animation
MacBook Pro
Keyframe Testing
Menu
Diamond
Wordpress - Force publish future event
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!