title: How to make a cropped border in an input?
body: <p>I need to create an input with a border that will change when the input is focused.</p>
  <p>The inputs should works in that way:
  When input is not focused and is empty, the label should be inside the input:</p>
  <p><a href="https://i.stack.imgur.com/jEFCH.png" rel="nofollow noreferrer">Input without focus</a></p>
  <p>When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.</p>
  <p><a href="https://i.stack.imgur.com/ZR5uw.png" rel="nofollow noreferrer">Input with focus</a></p>
  <p>I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:</p>
  <p><a href="https://i.stack.imgur.com/9MyQw.png" rel="nofollow noreferrer">Input with focus</a></p>
  <p><a href="https://i.stack.imgur.com/CpN9y.png" rel="nofollow noreferrer">Input without focus</a></p>
  <p>Could you please help me with this?</p>