Ввод с изменяющимся полем метки (во всех 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, чтобы стиль SCSS для input стал

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