checkbox css codepen

1<div class="new">
2  <form>
3    <div class="form-group">
4      <input type="checkbox" id="html">
5      <label for="html">HTML</label>
6    </div>
7    <div class="form-group">
8      <input type="checkbox" id="css">
9      <label for="css">CSS</label>
10    </div>
11    <div class="form-group">
12      <input type="checkbox" id="javascript">
13      <label for="javascript">Javascript</label>
14    </div>
15  </form>
16</div>
17
18<style>
19    /* This css is for normalizing styles. You can skip this. */
20*, *:before, *:after {
21  -webkit-box-sizing: border-box;
22  -moz-box-sizing: border-box;
23  box-sizing: border-box;
24  margin: 0;
25  padding: 0;
26}
27
28
29
30
31.new {
32  padding: 50px;
33}
34
35.form-group {
36  display: block;
37  margin-bottom: 15px;
38}
39
40.form-group input {
41  padding: 0;
42  height: initial;
43  width: initial;
44  margin-bottom: 0;
45  display: none;
46  cursor: pointer;
47}
48
49.form-group label {
50  position: relative;
51  cursor: pointer;
52}
53
54.form-group label:before {
55  content:'';
56  -webkit-appearance: none;
57  background-color: transparent;
58  border: 2px solid #0079bf;
59  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
60  padding: 10px;
61  display: inline-block;
62  position: relative;
63  vertical-align: middle;
64  cursor: pointer;
65  margin-right: 5px;
66}
67
68.form-group input:checked + label:after {
69  content: '';
70  display: block;
71  position: absolute;
72  top: 2px;
73  left: 9px;
74  width: 6px;
75  height: 14px;
76  border: solid #0079bf;
77  border-width: 0 2px 2px 0;
78  transform: rotate(45deg);
79}
80</style>