Chrome autofill overlapping floating label

Question

I implemented this form design which moves the label out of the input field with :valid.
The issue is that on page load, my browser fills in my saved credentials and the CSS rules under :valid are not taken into account.
When I click on a blank space or anywhere really on the page, it works.
I want it to work without the user having to make an action, JS would be an option if necessary. I already tried to fire up a click event, but it does not do anything, I have to click manually to execute the CSS below :valid.

.form-input-group input:valid~label {
  transform: translate(0, -200%);
}

.form-input-group input:valid {
  margin-top: 30px;
}

.form-input-group input:focus~label {
  transform: translate(0, -200%);
}

.form-input-group input:focus {
  outline: none;
  background: #ff4a56;
  color: white;
  margin-top: 30px;
}

.form-input-group label,
.form-input-group input {
  transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}

.form-input-group {
  position: relative;
  padding: 10px 0;
}

.form-input-group:first-of-type {
  padding-top: 0;
}

.form-input-group:last-of-type {
  padding-bottom: 0;
}

.form-input-group label {
  transform-origin: left center;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-size: 17px;
  box-sizing: border-box;
  padding: 10px 15px;
  display: block;
  position: absolute;
  transform: translate(0, -100%);
  z-index: 2;
  pointer-events: none;
}

.form-input-group input {
  appearance: none;
  background-color: none;
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 60px;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

<form action="" method="get">
  <div class="form-input-group">
    <input type="text" required/>
    <label>First Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label>Last Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label>Email Address</label>
  </div>
  <div class="form-input-group">
    <input type="password" required/>
    <label>Email Confirm</label>
  </div>
</form>

Edit

Fun fact: even a huge site like reddit is victim to this chromium big brain decision.

reddit login

You could try calling `checkValidity()` on the `form` after a timeout on page load. Note that [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete] with form fields is ... controversial, with Chrome in particular taking a different stance from other browsers. — Heretic Monkey, Apr 14 '22 at 11:45
@HereticMonkey Hey good suggestion. I've tried it and `checkValidity` is false after page load and timeout, but after I click somewhere in the DOM, `checkValidity` is true https://imgur.com/a/jFsjXKS W T F chrome. Like the value doesn't exist until I click somewhere, really well done I have to say. — Samuel Gfeller, Apr 14 '22 at 12:24
Yep, the value is really NOT in the input field before the user clicks somewhere. `console.log(emailInput.value)` is `false` on page load and timeout but `true` after I click on the header I'm left almost speechless. Are they trying to make our life hard or why doesn't it populate the input value like my password manager Bitwarden does. Beautifully inserting the values and works so well with animation and all. Chrome puts a kind of overlay of bulky text in the wrong size and font with a background color on the input field. How are we supposed to make it look pretty if they don't follow rules? — Samuel Gfeller, Apr 14 '22 at 12:28
Typo above: `emailInput.value` is not `false` obviously, but an empty string and after the user clicks somewhere it contains the email address. Here is a gif showing it https://imgur.com/a/UBieuny https://bugs.chromium.org/p/chromium/issues/detail?id=748968 and a lot of other issues related to chrome breaking the floating label and more UI styling. Closed WontFix, nice. — Samuel Gfeller, Apr 14 '22 at 12:39

Samuel Gfeller · Accepted Answer · 2022-04-18T12:21:01.557

It seems that this is unfixable because of the stubbornness of chromium decision makers, despite the seemingly general confusion and frustration of web devs since 2014 and other browsers behaving differently.

This is one of the many chromium bug tickets that were closed as WontFix.

Here are some others.

Edit

Via this article, I saw :-webkit-autofil and did some testing, and it seems to kind of work like I wanted. Let's just hope that it'll be working consistently over time.

working floating label

Chrome autofill overlapping floating label

Edit

1 Answers1

Edit

Linked