Fri. Jan 24th, 2020

Host your Website

Read and learn

Input Animations With HTML And CSS

1 min read



I really wanted to cover css animation and transitions today. So I applied it to an input tag that you can use in your html forms.

We will cover everything from transitions to animations. Pseudo Elements like ::before ::after and :focus selectors.

Hope that this will make it easy for you to create css animations and come up with something cool!

-~-~~-~~~-~~-~-
Follow my Twitter:
https://twitter.com/DevEd94

Please watch: “Should You Become A Software Engineer?”

-~-~~-~~~-~~-~-

44 thoughts on “Input Animations With HTML And CSS

  1. Thank you Sir, I achieve this sometime ago, but your technique is much better, I was using jQuery also, and you achieved a better result only with CSS. Thank you very much master.

  2. Thank you so much Dev Ed, I am a computer science graduate from Morocco who stopped coding for four years almost, but thanks to your videos and the charismatic way you explain concepts, I am finally starting to get a taste of it back.

  3. Ok,… :valid selector might not be the best selector to keep the label up in all intended situations. A solution:
    step 1. Add a placeholder prop to the input with the value: " ". So: <input placeholder=" " etc…
    step 2. Replace the :valid selector for :not(:placeholder-shown), This selects the the state when there is something typed into the input, that's the state where we want to keep the label up, valid or not.

  4. I do really appreciate all the videos that you post on channel. Great job Dev. And I get really fun and pleasure watching your works. Thanks for everything

  5. First, your contents are great
    Seconds, this channel is good

    but the important one is that your face looks like indonesian singer hahaha
    so that's the reason i'll click subscribe

  6. If the input is not required, we can use the ":not(:placeholder-shown)" instead of ":valid". And in the html code for the input field add a placeholder with the value " "(space).

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.