You may also like...

11 Responses

  1. Fabio Italiano says:

    awesome my friend! I would like to retain the placeholder after typing, it is possible?

  2. designify says:

    Hey there,
    Thanks for visiting..
    Not sure that I understand. The placeholders are visible after you start typing your username and password… What do you mean?


  3. Dani says:

    Great and easy example. Anyway there’s a problem on firefox. When you click on username or password the label don’t animate. Works properly in chrome.
    How we can solve that?

  4. designify says:

    Thanks for visiting.
    I will need some time to check the example in Mozilla. Meanwhile, this might be helpful for you:


    • Dani says:

      thanks for the reply. The problem with that approach is that a lot of time the label doesn’t animate and stuck on top of the prefilled box.
      Just to be more clear if you do something like that:

      <form id="login" ng-if="login" ng-submit="user.login()" id="login" style="opacity: 0" ng-style="{opacity:1}"




      If you save the username and the pwd the next time you’ll see that the Password label will stay inside the input covering the prefilled pwd.
      That problem is always evident on Chrome (firefox works fine)

  5. designify says:

    Strange issue.. Have you managed to make it work?
    I think jQuery might be needed to make the animated label work if you are keen on adding some. I can’t do much without the actual code though. Have a look at this example:
    If you want me to have a look, put the code in codepen or cssdeck for me to see.


    • Dani says:

      oh no I don’t think so. I think that your solution is the best one because you don’t need other label or something like that. You should just manage the animation on firefox.
      The part of the css that doesn’t work (works only for chrome) is:

      input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
      color: #1abc9c;
      font-size: 11px;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      visibility: visible !important;

      we should add that:

      the color change with that one the only problem is that it soesn’t animate


  6. designify says:

    Yep, figured out that this is the code part that it problematic. Will check it out later.
    Thanks and all the best:)))

  7. designify says:

    Sorry, too busy lately. Will try to get into it today. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *