title: angular on click reduce the form field size
body: <p>I am new to angular js , CSS and have basic Java-script knowledge.</p>
  
  <p>I am trying to design a form page in where the form field, say username would reduce in size on click and increase on click somewhere else. I tried ng-hide and ng-show where I added different css styles to each class and it made the form field disappear and appear on click.</p>
  
  <p>Any help much appreciated.</p>
  
  <p>Thanks.</p>
  
  <p>UPDATED: </p>
  
  <p>This is my input text box where i want the UserName to reduce in size and sit at the left top of the textbox on click.</p>
  
  <pre><code>&lt;body&gt;
  &lt;input type="text" value="Username" style="width: 100%; height: 50px ; 
   border:0;border-bottom: 1px solid black;" &gt; &lt;/body&gt;
  </code></pre>