<form class="form">
    <h1>:user-invalid vs :invalid</h1>
    <label for="email-1" class="form__label">
        Email <small>:invalid</small>
    </label>
    <input id="email-1" type="email" placeholder=":invalid" class="form__input form__input--invalid" required>
    <p class="form__err-msg">
        Please insert a valid email-adress.
    </p>
    
    <label for="email-2" class="form__label">
        Email <small>:user-invalid</small>
    </label>
    <input id="email-2" type="email" placeholder=":user-invalid" class="form__input form__input--user-invalid" required>
    <p class="form__err-msg">
        Please insert a valid email-adress.
    </p>
</form>
.form {
    width: 90vw;
    max-width: 30rem;
    margin: 2rem auto;
    background-color: #fff;
    padding: 30px 60px 30px 30px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.5);
   -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0px 20px 18px rgba(0, 0, 0, $shadow-opacity);
}

.form__label {
    display: block;
    margin: 2rem 0 .5rem;
}

.form__input {
    display: block;
    width: 100%;
    padding: .5em 1em;
    margin: 0 0 .5rem;
    
    border: 1px solid #ccc;
}

.form__input--invalid:invalid {
    border-width: 3px;
    border-color: red;
    
    & + .form__err-msg {
        display: block;
    }
}

.form__input--user-invalid:user-invalid {
    border-width: 3px;
    border-color: red;
    
    & + .form__err-msg {
        display: block;
    }
}


.form__err-msg {
    display: none;
    margin: 0;
    color: red;
    font-size: .7rem;
}








body {
    background: url('https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg') no-repeat;
    background-size: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.