Animated Textboxes

In this example below you will see how to do a Animated Textboxes with some HTML / CSS and Javascript

This is a simple animated textbox, made with pure CSS and the :focus pseudo-class. Read more in the pen page itself. Feel free to reference this CSS--I made it unadulterated CSS for the text box, so referencing this CSS should make just the textboxes with class expandable react.

Thumbnail
This awesome code was written by awesom3, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright awesom3 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Animated Textboxes</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Animated Textboxes by <a href="https://codepen.io/awesom3/" target="_blank">Awesomen3ss</a></h1>
<div>This is a display of input textboxes that expand when you click on them and contract when you take focus away. <b>NOTE:</b> To style the width, style the <code>:focus</code> pseudo-class's width, which is as simple as using, say, <code>#username-input:focus</code> instead of the <code>#username-input</code> selector. You can also make the element have an additional class <code>no-corner-curves</code> to prevent the curves shown normally.</div>
<div>
  <input class="expandable" type="text" />
  Input <code>class="expandable" type="text"</code>
</div>
<div>
  <input class="expandable no-corner-curves" type="text" />
  Input <code>class="expandable no-corner-curves" type="text"</code>
</div>
<div>
  <input type="text" />
  Input <code>type="text"</code> (no <code>class</code>) (just to prove it works the way I say it does)
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/awesom3/animated-textboxes-FmhDJ */
/******************************\
 * Animated Textboxes         *
 * by Awesomen3ss             *
 * While this is open-source  *
 * from being hosted on       *
 * Codepen, please, in the    *
 * spirit of politeness, give *
 * credit to Awesomen3ss.     *
 * If you reference this CSS  *
 * directly at:               **************
 * https://codepen.io/awesom3/pen/FmhDJ.css *
 * That would count as credit. *************
 * Thank you!                 **
\******************************/
input.expandable:not(:focus)
{
  width: 1em;
}
input.expandable:not(.no-corner-curves)
{
  border-radius: 1em;
}
input.expandable {
  transition: width 2s; /* doesn't seem to work on Firefox Nightly 33, but it might work on some things */
}

Comments