<!DOCTYPE html>
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: green;
color: white;
content: "\2713";
text-align: center;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="content">
<div class="box">
<p>
<input type="checkbox" id="c1" name="cb">
<label for="c1">Option 01</label>
</p>
<p>
<input type="checkbox" id="c2" name="cb">
<label for="c2">Option 02</label>
</p>
<p>
<input type="checkbox" id="c3" name="cb">
<label for="c3">Option 03</label>
</p>
</div>
</div>
</body>
</html>
Ref: https://plnkr.co/edit/NVYkgMEC7ahYT46fHI9i?p=preview
<html>
<head>
<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
border: 1px solid #7f83a2;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: green;
color: white;
content: "\2713";
text-align: center;
}
</style>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="content">
<div class="box">
<p>
<input type="checkbox" id="c1" name="cb">
<label for="c1">Option 01</label>
</p>
<p>
<input type="checkbox" id="c2" name="cb">
<label for="c2">Option 02</label>
</p>
<p>
<input type="checkbox" id="c3" name="cb">
<label for="c3">Option 03</label>
</p>
</div>
</div>
</body>
</html>
Ref: https://plnkr.co/edit/NVYkgMEC7ahYT46fHI9i?p=preview
This comment has been removed by the author.
ReplyDelete