input[type=text] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: .3s;
}

    input[type=text]:focus {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }

input[type=checkbox] + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
}

input[type=checkbox] {
    display: none;
}

    input[type=checkbox] + label:before {
        content: "\2714";
        border: 0.1em solid #000;
        border-radius: 0.2em;
        display: inline-block;
        width: 1em;
        height: 1em;
        padding-left: 0.2em;
        padding-bottom: 0.3em;
        margin-right: 0.2em;
        vertical-align: bottom;
        color: transparent;
        transition: .2s;
    }

    input[type=checkbox] + label:active:before {
        transform: scale(0);
    }

    input[type=checkbox]:checked + label:before {
        background-color: MediumSeaGreen;
        border-color: MediumSeaGreen;
        color: #fff;
    }

    input[type=checkbox]:disabled + label:before {
        transform: scale(1);
        border-color: #aaa;
    }

    input[type=checkbox]:checked:disabled + label:before {
        transform: scale(1);
        background-color: #bfb;
        border-color: #bfb;
    }



/*Don't forget to add Font Awesome CSS : "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"*/
input[type="text"] {
    width: 100%;
    border: 2px solid #aaa;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: 0.3s;
}

    input[type="text"]:focus {
        border-color: dodgerBlue;
        box-shadow: 0 0 8px 0 dodgerBlue;
    }

.inputWithIcon input[type="text"] {
    padding-left: 40px;
}

.inputWithIcon {
    position: relative;
}

    .inputWithIcon i {
        position: absolute;
        left: 0;
        top: 8px;
        padding: 9px 8px;
        color: #aaa;
        transition: 0.3s;
    }

    .inputWithIcon input[type="text"]:focus + i {
        color: dodgerBlue;
    }

    .inputWithIcon.inputIconBg i {
        background-color: #aaa;
        color: #fff;
        padding: 9px 4px;
        border-radius: 4px 0 0 4px;
    }

    .inputWithIcon.inputIconBg input[type="text"]:focus + i {
        color: #fff;
        background-color: dodgerBlue;
    }