我需要設計這個文本字段最初在頁面加載它會像下面的圖像

懸停時，標簽將向上移動，顏色將發生變化

相同的任何解決方案鏈接。

謝謝

您可以使用~和:占位符顯示的css選擇器的組合來實現這一點。

這里有一個例子:

.container {
  width: 300px;
  padding: 20px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.floating-label-content {
  position: relative;
  margin-bottom: 20px;
}

.floating-label {
  color: #000;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 11px;
  padding: 0 5px;
  background: #fff;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.floating-input {
  font-size: 12px;
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 20px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 4px;
  box-sizing: border-box;
}

.floating-input:focus {
  outline: none;
  border: 1px solid #3D85D8;
}

.floating-input:focus~.floating-label {
  top: -8px;
  font-size: 13px;
  color: #3D85D8;
}

.floating-input:not(:placeholder-shown) {
  color: #3D85D8;
  border: 1px solid #3D85D8;
}

.floating-input:not(:placeholder-shown)~.floating-label {
  top: -8px;
  font-size: 13px;
  color: #3D85D8;
}

<div class="container">
  <div class="floating-label-content">
    <input class="floating-input" type="text" placeholder=" ">
    <label class="floating-label">Your Name</label>
  </div>
</div>

您可以查看這個示例，并根據您的需要進行修改: https://css-tricks.com/float-labels-css/