テキストボックスのデザインを記事みたいに変更したい

Question

実現したいこと

https://codepen.io/takeradi/pen/mPyYeq
こちらのcodepenのような動きにしたいと考えています

labelの箇所がうまく動いてくれないのが現状です

<p class="text-input">
 <label class="test" for="input1">Name</label>
 <input type="text" name="log" placeholder="名前を入力" id="input1"             autocomplete="username" value="" size="20" />
</p>

.text-input {
  position: relative;
  margin-top: 50px;
}
#input1 {
  display: inline-block;
  width: 500px;
  height: 40px;
  box-sizing: border-box;
  outline: none;
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 10px 10px 10px 100px;
  transition: all 0.1s ease-out;
}

#input1 + .test {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  color: white;
  border-radius: 3px 0 0 3px;
  padding: 0 20px;
  background: #E03616;
  transform: translateZ(0) translateX(0);
  transition: all 0.3s ease-in;
  transition-delay: 0.2s;
}

#input1:focus + .test {
  transform: translateY(-120%) translateX(0%);
  border-radius: 3px;
  transition: all 0.1s ease-out;
}

やったこと

検証ツールで下記のcssのコードが機能してなさそうなのが原因だと思いました。
しかしどうやっても動かない状況です

codepenのように
.test→labelに変更しても動かないです

#input1 + .test {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  color: white;
  border-radius: 3px 0 0 3px;
  padding: 0 20px;
  background: #E03616;
  transform: translateZ(0) translateX(0);
  transition: all 0.3s ease-in;
  transition-delay: 0.2s;
}

#input1:focus + .test {
  transform: translateY(-120%) translateX(0%);
  border-radius: 3px;
  transition: all 0.1s ease-out;
}

どなたか教えていただけますと幸いです。
よろしくお願いいたします。

Answer 1

まず、HTMLで、ラベルをテキストボックスの後ろに移動します。
これは、隣接兄弟結合子(+)を使うために必須です。

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN

<p class="text-input">
  <input type="text" name="log" placeholder="名前を入力" id="input1" autocomplete="username" value="" size="20" />
  <label class="test" for="input1">Name</label>
</p>

CSSは参考先と同じにすればOK

.text-input {
  position: relative;
  margin-top: 50px;
}
#input1 {
  display: inline-block;
  width: 500px;
  height: 40px;
  box-sizing: border-box;
  outline: none;
  border: 1px solid lightgray;
  border-radius: 3px;
  padding: 10px 10px 10px 100px;
  transition: all 0.1s ease-out;
}
#input1 + .test {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  line-height: 40px;
  color: white;
  border-radius: 3px 0 0 3px;
  padding: 0 20px;
  background: #E03616;
  transform: translateZ(0) translateX(0);
  transition: all 0.3s ease-in;
  transition-delay: 0.2s;
}

#input1:focus + .test {
  transform: translateY(-120%) translateX(0%);
  border-radius: 3px;
  transition: all 0.1s ease-out;
}
#input1:focus {
  padding: 10px;
  transition: all 0.3s ease-out;
  transition-delay: 0.2s;
}

Comments

[tyosu]

hatena19さん
ありがとうございます！！
また、助けられました。。
毎回本当に勉強になります。
ご丁寧にありがとうございます。
また何かありましたらよろしくお願いいたします。

Answer 2

動かない状況です

#input1 + .test が　次のような意味になりますが、提示のHTMLにこれに該当するものが無いからですね
→　「id="input1"を持つノード」の直後に居る、親が同じでclass="test"を持つノード

だからinputの後にlabelを置かないとダメだし、その間に別のタグがいてもダメです
ガチガチに条件を絞っているのはその方が事故が起きにくいからです(どこかにコピーした際など、意図しないlabelまで反応しないように)
セレクタは書き方次第で結構自由に対象を指定できるので、リファレンス眺めてるだけでも結構楽しいですよ
CSS セレクター - CSS: カスケーディングスタイルシート | MDN

---

ちなみに#input1:focus + .testは次のような意味です
→　「id="input1"を持つフォーカスされているノード」の直後に居る、親が同じでclass="test"を持つノード

inputにフォーカスが当たるとlabelのスタイルが、「#input1:focus + .testの内容に、#input1 + .testが上書きコピーされた状態」になり、フォーカスが外れると元に戻ります。

Comments

[tyosu]

hirohiroさん
ありがとうございます。
とてもご丁寧に分かりやすくありがとうございます。
とても勉強になりました。。。
また何かありましたら教えていただけますと幸いです。
よろしくお願いいたします。