Edge игнорирует :focus, :valid, :placeholder-shown

Question

Label всегда находиться вверху, хотя без фокуса и без контента должен находиться "внутри" input. Тестирую на браузере Edge.

SCSS:

input {
  width: 244px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  padding: 0 10px;
  background: transparent;
  border: 2px solid var(--semilight);
  outline: none;
  border-radius: 5px;

  &:focus ~ span, &:not(:placeholder-shown) ~ span {
    top: 1px;
    font-size: 14px;
    background: var(--dark);
  }
}

HTML:

<div className="input__area">
  <input />
  <span className="input__lable">Название</span>
</div>

Нашел статью на англоязычном stackoverflow, там предлагалось заменить на &:focus ~ span, &:invalid:not(:focus)::-webkit-input-placeholder, но так label поднимается только при фокусе, не зависимо от контента в input, после пропажи фокуса не зависимо от того написано в input что то или нет label опускается вниз.

Answer 1

Что бы заработал псевдокласс :placeholder-shown у элемента input должен быть плейсхолдер (пусть даже и пустой).

input:focus + span, input:not(:placeholder-shown) + span {
  color: red;
}

<input placeholder="">
<span>я стану красным при фокусе или непустом поле</span>

БЛОГ НА HUSL

Edge игнорирует :focus, :valid, :placeholder-shown

Ответы (1 шт):