輸入帶有移位標簽字段（在所有CSS中），不需要

Question

我對所有CSS進行樣式輸入都有一個浮動標簽。 我遇到的問題是，這需要輸入具有required屬性才能管理移動標簽（使用純CSS）。 我想知道是否可以在沒有required字段的情況下執行此操作，因為將其以某些形式放置會干擾表單驗證。 我的標記和CSS看起來像這樣：

.myInput {
  position: relative;
  input {
    padding: 30px 10px 10px;
    display: block;
    width: 100%;
    border: 1px solid black;
    &:focus {
      outline: none;
    }
    &:focus~label,
    &:valid~label,
    &:placeholder-shown~label {
      top: 10px;
      color: black;
    }
  }
  label {
    color: red;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
  }
}



<div class="myInput">
  <input type="text" required id="target" />
  <label htmlFor="target">
        label
    </label>
</div>

您會注意到，如果刪除了required的標簽，則標簽將不再移入空輸入中的占位符位置。 這是在工作的小提琴-https: //jsfiddle.net/1ob2npcu/2/

我試圖查看是否有一種方法可以完全在CSS中執行此操作-如果有幫助，我正在使用SCSS。 謝謝！

Answer 1

如果刪除required屬性，則也刪除

&:valid~label

從CSS ：那么您需要為輸入定義一個占位符，並還原placeholder-shown偽類的邏輯，因此input的SCSS樣式變為

input {
    padding: 30px 10px 10px;
    display: block;
    width: 100%;
    border: 1px solid black;

    &::placeholder { 
       color: transparent;
    }

    &:focus {
        outline: none;
    }

    &:focus ~ label,
    &:not(:placeholder-shown) ~ label{
        top: 10px;
        color: black;
    }

}

同樣，標簽中的屬性是for （不是htmlfor ）

jsfiddle上的分叉