Nicolas_LeBot Nicolas_LeBot - 1 year ago 214
HTML Question

Chrome autofill with MDL for type="password"

I'm currently working on my website with the MDL (Material Design Lite) from google and I have a little problem.

enter image description here

As you can see, the stars are in the good place but the password stay here (he is moving after any click or press on the keyboard)

My code is really simple :

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="mail">
<label class="mdl-textfield__label">Adresse Email</label>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="test" class="mdl-textfield__input" type="password" name="password">
<label class="mdl-textfield__label">Password</label>

The code is usual and basic. Problem is, in MDL (Link here : there is nothing for password type, so I always got the problem from before.

I want to keep the chrome autofill for my client so disabled it is not a option. Is there any way to change this problem ?

Thank's !

Answer Source


<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" type="password" id="password" required name="password">
  <label class="mdl-textfield__label" for="password"></label>


.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label {
  transform: translate3d(0, -20px, 0);
  visibility: hidden;

.mdl-textfield--floating-label input[type=password]:-webkit-autofill ~ label:after {
  content: 'Password';
  visibility: visible;
  left: 0;
  transform: translate3d(0, -20px, 0);
  background: transparent;
  color: inherit;

Change the color and maybe the px offset to suit your needs

JavaScript (JQuery) solution

  $.each($('.mdl-textfield__input'), function() {
    $(this).parent().get(0).MaterialTextfield.checkDirty(); // Pre-filled values from browser check
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download