Помощь с применением focus для input в css

Вариант на CSS.

.o-field { 
  position: relative; 
} 
.o-field__input { 
  padding: 10px 16px; 
  border: 1px solid #f2f2f2; 
} 
 
.o-field__label { 
  position: absolute; 
  top: 10px; 
  left: 16px; 
  pointer-events: none; 
} 
 
.o-field__input:invalid + 
.o-field__label { 
  opacity: 1; 
} 
 
.o-field__input:valid + 
.o-field__label, 
.o-field__input:focus +  
.o-field__label { 
  opacity: 0; 
}

<div class="o-field"> 
  <input type="text" class="o-field__input" required> 
  <label class="o-field__label">Name</label> 
</div>

Добавьте атрибут placeholder вместо label. Это поможет вам в том что бы текст написанным пользователем не залезал на другой.

<input class="form_control" id="foo2" type="text" placeholder="Your Email">

Это решается с помощью свойств active и focus у элемента input. Мы просто узнаем, когда инпут переходит в такие состояния и меняем свойства плейсхолдера.

.form_control:active+.form_text, .form_control:focus+.form_text{
  opacity:0;
}

Тут используется смежный селектор +, про его свойства можно подробнее почитать например здесь:http://codeharmony.ru/materials/42

Еще можно добавить немного анимации, например вот так

.form_text{
  transition:opacity 1s;
}

Вот так.

.test { 
  color: red; 
} 
 
.test:focus::placeholder { 
  color: transparent 
}

<input type="text" class="test" placeholder="focus me"></input>