Custom checkbox example

Developer
António Capelo
Size
3,495 Kb
Views
10,115

How do I make an custom checkbox example?

Quick example of an alternative to the standard browser checkbox input field. What is a custom checkbox example? How do you make a custom checkbox example? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

Custom checkbox example Previews
IQ Test

Custom checkbox example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom checkbox example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="todos-container"> <h1 class="desc">Custom checkbox example</h1> <ul class="todo-list shadow"> <li class="todo-item-container" ng-class="{done: utils.isTodoDone(item)}"> <div class="checkboxcontainer"> <input id="todo{{item.id}}" type="checkbox" ng-model="item.done"/> <label for="todo{{item.id}}"></label> </div> <span class="todo-item-text">Check this out</span> </li> </ul>
</div>
</body>
</html>

Custom checkbox example - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
* { box-sizing: border-box;
}
html { font-family: 'Oswald', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body { width: 100%; height: 100%; position: fixed; font-family: 'Oswald', Helvetica, Arial, sans-serif; padding: 2em 2em 4em; font-size: 16px; line-height: 1.5em; color: #312a18; background: #6F696E; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
.shadow { -moz-box-shadow: 0 8px 86px 1px black; -webkit-box-shadow: 0 8px 86px 1px black; box-shadow: 0 8px 86px 1px black;
}
.todos-container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-family: 'Oswald',Helvetica, Arial, sans-serif; text-align: center;
}
.todos-container .desc { background: transparent; color: #8B1D1D; font-size: 38px; margin-bottom: 60px; line-height: 40px;
}
.todos-container .todo-item-container { width: 300px; border: 1px solid grey; background: white; list-style: none; padding: 10px; max-width: 798px; width: 100%; border-top: 1px dotted black; font-size: 26px; line-height: 26px; text-align: center;
}
.todos-container .todo-list { max-width: 800px; width: 100%; padding: 0; margin: 0 auto;
}
.checkboxcontainer { position: relative; width: 25px;
}
.checkboxcontainer input { display: none;
}
.checkboxcontainer label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5;
}
.checkboxcontainer input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;
}
.checkboxcontainer label { cursor: pointer; position: absolute; width: 22px; height: 22px; top: 3px; left: 0; background: #eee; border: 1px solid #ddd;
}
.checkboxcontainer label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.1)"; filter: alpha(opacity=0.1); opacity: 0.1; content: ''; position: absolute; width: 7px; height: 4px; background: transparent; top: 5px; left: 5px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}
.checkboxcontainer label:hover::after { opacity: 0.5;
}
Custom checkbox example - Script Codes
Custom checkbox example - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3
Size 3,495 Kb
Views 10,115
Do you need developer help for Custom checkbox example?

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!

António Capelo (capelo) Script Codes
Name
Full-width slider.
Gif as page background
Room
Menu with following underline
ToDo
Background cover
Analog Clock
AngularJS Modal Factory
8-Bit Avatar
Max-height transition
Create amazing sales emails 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!