CSS - styled input checkbox HTML element (custom style with animation)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>

    label.field {
        /* Noting here yet ... */
    }

    input.input {
        background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4xMDUgMTcuMTA1Ij48cmVjdCBzdHlsZT0iZmlsbDogIzc2NzY3NiIgd2lkdGg9IjE3LjEwNSIgaGVpZ2h0PSIxNy4xMDUiIHg9IjAiIHk9IjAiIHJ5PSIyLjAwNSIgcng9IjIuMDA1IiAvPjxyZWN0IHN0eWxlPSJmaWxsOiAjZmZmZmZmIiB3aWR0aD0iMTQuNyIgaGVpZ2h0PSIxNC43IiB4PSIxLjIwMyIgeT0iMS4yMDMiIHJ5PSIxLjEzNiIgcng9IjEuMTM2IiAvPjwvc3ZnPg==') no-repeat center / 95%;
        width: 16px;
        height: 16px;
        vertical-align: middle;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        transition: 0.5s;
        cursor: pointer;
    }

    input.input:checked {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4xMDUgMTcuMTA1Ij48cmVjdCBzdHlsZT0iZmlsbDogIzAwNzVmZiIgd2lkdGg9IjE3LjEwNSIgaGVpZ2h0PSIxNy4xMDUiIHg9IjAiIHk9IjAiIHJ5PSIyLjAwNSIgcng9IjIuMDA1IiAvPjxwYXRoIGNsYXNzPSJhbmltYXRpb24iIHN0eWxlPSJmaWxsOiAjZmZmZmZmIiBkPSJtNy4xODUgMTQuNTY2IDcuNzUtOS43NTUtMi4wNy0xLjg3MS01Ljk0NyA3LjM1LTIuNDA2LTIuMTM4LTEuODcgMS44N3oiIC8+PC9zdmc+');
    }

    span.label {
        margin: 0 0 0 3px;
        vertical-align: middle;
        font: 13px Arial;
        color: #5f6368;
    }

</style>

<label class="field">
  <input class="input" type="checkbox" />
  <span class="label">Put some label here ...</span>
</label>