CSS - styled radio button 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,PHN2ZyBjbGFzcz0iaWNvbiBkZWZhdWx0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4xMDUgMTcuMTA1Ij48Y2lyY2xlIHN0eWxlPSJmaWxsOiAjNzY3Njc2IiBjeD0iOC41NTIiIGN5PSI4LjU1MiIgcj0iOC41NTIiIC8+PGNpcmNsZSBzdHlsZT0iZmlsbDogI2ZmZmZmZiIgY3g9IjguNTUyIiBjeT0iOC41NTIiIHI9IjcuMzUiIC8+PC9zdmc+') 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,PHN2ZyBjbGFzcz0iaWNvbiBjaGVja2VkIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4xMDUgMTcuMTA1Ij48Y2lyY2xlIHN0eWxlPSJmaWxsOiAjMDA3NWZmIiBjeD0iOC41NTIiIGN5PSI4LjU1MiIgcj0iOC41NTIiIC8+PGNpcmNsZSBzdHlsZT0iZmlsbDogI2ZmZmZmZiIgY3g9IjguNTUyIiBjeT0iOC41NTIiIHI9IjcuMzUiIC8+PGNpcmNsZSBjbGFzcz0iYW5pbWF0aW9uIiBzdHlsZT0iZmlsbDogIzAwNzVmZiIgY3g9IjguNTUyIiBjeT0iOC41NTIiIHI9IjUuMDIzIiAvPjwvc3ZnPg==');
    }

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

</style>

<label class="field">
  <input class="input" type="radio" name="put-some-name-here" />
  <span class="label">Put some label here ...</span>
</label>