Анимация метки формы с помощью CSS

Question

Я пытаюсь добавить к ярлыку простую анимацию, чтобы при щелчке в поле формы метка скользила вверх - очень похоже на эффект анимации Material Design.

Проблема, с которой я столкнулся, заключается в том, что мы используемформа Hubspot, вставленная на страницу, так что я на самом деле не могу контролировать разметку.

Прежде чем я задам вопрос нашим разработчикам, я просто задаюсь вопросом, возможно ли это на самом деле с простым CSS?

Это в основном то, как код выглядит для формы:

<div class="hs-firstname">
<label>Enter First Name</labe>
<div class="input">
<input class="hs-input firstname"/>
</div>
</div> 

, поэтому естественно подумать попробовать что-то вроде:

input{position:relative;}
label{position:absolute; top:0; left:0; font-size:18px; transition: all 0.2s ease-in-out;}
input:focus ~ label{top:-15px; font-size:12px;}

Проблема заключается во вложении поля ввода в его собственноеdiv, что опять-таки вне моего контроля.

в противном случае это было бы просто.

Так что просто интересно, может кто-нибудь узнать способ обойти это с Pure CSS или если действительно нужно немногоresponse.js (в которую встроена страница)

Заранее спасибо

Answer 1

используйте эту структуру и подобный код,

В ответе @James Coyle, если вы нажмете на Метку, она не будет работать

.hs-firstname {
  position: relative; 
  margin-top: 50px;
}

input {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 2px 5px;
  border: 1px solid #999;
}
label {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

input:focus + label {
  top: -18px;
  font-size: 14px;
}

<div class="hs-firstname">
  <input class="hs-input firstname" />
  <label>Enter First Name</label>
</div>

Answer 2

Ваш HTML должен выглядеть следующим образом:

.hs-firstname {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  transition: all 0.2s ease-in-out;
}

input:focus ~ label {
  top: -15px;
  font-size: 12px;
}

<div class="hs-firstname">
  <input id="firstname" class="hs-input firstname" />
  <label for="firstname">Enter First Name</label>
</div>

Обратите внимание, что метка должна быть родственной входной и должна быть после входной, чтобы селектор родной линии работал. Вы можете реализовать это с помощью JavaScript.