Source code expandable search box using LESS CSS Processor.

Expandable Search box Using CSS LESS Processor | WMI - data:image/png;base64,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
Here the code:
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="http://codepen.io/shane935/pen/EGCyn" />
<style class="cp-pen-styles">input {
  padding: 10px 8px;
  width: 100px;
  border-radius: 12px;
  border: 1px solid gray;
  transition: 300ms width;
  outline: 0;
  font-size: 16px;
}
input:hover {
  width: 120px;
}
input:focus {
  width: 300px;
  transition: 600ms width;
}
</style></head><body>
<input type="text"  placeholder="Search"/>
</body></html>
Or view live editor below:




Here the Result :




Question: How can i use these codes to my own localhost or cdn.
You can view the source of js and put into your cdn or hosting then replace the code url source with your hosted .js
Question:
Why you using codepen.io js ?.
Because no Best Template and processor in any code live editor like codepen.io

I hope this Article be help you. Please share us article