Good Practice Form Field

by db_dev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col">
            <div class="card" style="width: 18rem;">
                <div class="card-body">
                    <p class="card-text"></p>

                    <form action="" id="example">
                        <label for="employee-id">
        Your employee <abbr title="Identification">ID</abbr> number
      </label>
                        <p id="employee-id-hint" class="input-hint">
                            Can be found on your employee intranet profile. Example: <samp>a1234567-89</samp>.
                        </p>
                        <input id="employee-id" aria-describedby="employee-id-hint" name="id-number" type="text" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS

// This technique was created by Thierry Koblentz 
// (http://www.cssmojo.com/) to make larger hit areas for
// interactive content:
// https://codepen.io/thierry/pen/gvYPbN
.input-wrapper {
    position: relative; // Make the pseduo element stretch to the full width and
    // height of `.input-wrapper`
    & label::after {
        content: "";
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    } // Ensure the input isn't accidentally blocked by clicks 
    // on the pseudo element
    & input {
        position: relative;
        z-index: 2;
    }
}

label {
    color: #4a4a4a;
    display: block;
    letter-spacing: 0.015em;
    padding-bottom: 0.25em;
    padding-left: 0.25em;
}

.input-hint {
    display: block;
    font-size: 80%;
    line-height: 1.4;
    margin-top: 0.15em;
    padding-left: 0.25em;
}

input {
    background: #ffffff;
    background: linear-gradient(0deg, #ffffff 93%, #e0e0e0 100%);
    border: 1px solid #999999;
    border-radius: 0.3em;
    display: block;
    line-height: 1;
    padding: 0.75em 0.75em 0.6em 0.75em;
    width: 100%; // States
    &:hover,
    &:active {
        border-color: darken(#999999, 15%);
    }
    &:focus {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #d33a2c;
        outline: none;
    }
}

// Demo setup
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
}

body {
    background-color: #bc3428;
    color: #666666;
    margin: 5em;
}

main {
    background-color: #ffffff;
    border-radius: 0.5em;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95vw; // Media Queries
    @media screen and (min-width: 35em) {
        padding: 2em;
        width: 75vw;
    }
}

samp {
    background-color: #ededed;
    border: 2px solid #ededed;
    border-radius: 0.2em;
    margin-left: 0.15em;
   ...