How to apply style if an input field is empty just only using CS

ghz 7months ago ⋅ 122 views

How to apply style if an input field is empty just only using CSS?

I have an input element and a sibling label element. Upon page load, the label overlaps the input element, serving as a placeholder. When the input is focused and contains a valid value, the label moves to the top of the input.

img

However, this behavior doesn't apply to email type inputs because the label should only leave when a valid email value is entered and the input loses focus.

img

Additionally, if an input is not required, the style will be applied even if it not focused.

img

I want to prevent that. Below is my current CSS for achieving this:

.label-animated {
    position: absolute;
    left: 1.6rem;
    top: 1rem;
    cursor: text;
    font-size: medium;
    transition: .5s ease;
    background-color: var(--bg-100) !important;
}

.input.input-form {
    width: 100%;
    font-size: medium;
    padding: 1rem;
    padding-bottom: .5rem;
    border: .0625rem solid var(--border-200);
    border-radius: 30rem; /*max border*/
    outline: none;
    background-color: transparent;
}

.input.input-form:focus~.label-animated,
.input.input-form:valid~.label-animated {
    top: -.72rem !important;
    left: 2rem;
    color: var(--accent-500);
}

Despite extensive searching for a solution, I have been unable to find any resources or guidance regarding this issue. It appears that there is currently no available information or solutions that address this specific problem. I can select an input that has no value input[value=""] but that has value, I don't really know. Can I fix this problem by just only using CSS?

Answers

To achieve the desired behavior where the label only moves when a valid value is entered and the input loses focus for email type inputs, you can use the :valid pseudo-class along with the :focus pseudo-class in your CSS selector. However, since CSS alone cannot check the validity of an email input in real-time, you may need to rely on JavaScript to handle this.

Here's how you can modify your CSS and HTML structure to achieve the desired behavior:

HTML:

<div class="input-container">
    <input type="email" id="emailInput" class="input input-form" required>
    <label for="emailInput" class="label-animated">Email Address</label>
</div>

CSS:

.input-container {
    position: relative;
}

.label-animated {
    position: absolute;
    left: 1.6rem;
    top: 1rem;
    cursor: text;
    font-size: medium;
    transition: .5s ease;
    background-color: var(--bg-100) !important;
}

.input.input-form {
    width: 100%;
    font-size: medium;
    padding: 1rem;
    padding-bottom: .5rem;
    border: .0625rem solid var(--border-200);
    border-radius: 30rem; /*max border*/
    outline: none;
    background-color: transparent;
}

.input.input-form:focus ~ .label-animated,
.input.input-form:valid ~ .label-animated,
.input.input-form[value]:not([value=""]) ~ .label-animated {
    top: -.72rem !important;
    left: 2rem;
    color: var(--accent-500);
}

With this setup, the label will only move when the input is focused, contains a valid value, or has a value (even if it's not required). The :valid pseudo-class will apply when the input's value is considered valid according to its type attribute (e.g., email validation), and the [value]:not([value=""]) selector will apply when the input has any value. However, please note that this won't provide real-time validation for the email input; it will only check if there is any value entered. For real-time validation, you'll need to use JavaScript.

#css #forms