<!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 */
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
