Переход метки отменяется, когда текстовое поле отключается

Я создаю материал, подобный текстовому полю, и он работает, за исключением случаев, когда я отключаю поле ввода. Когда поле сфокусировано, метка поднимается над курсором, если в текстовом поле есть какой-либо ввод, он должен оставаться над курсором. Когда я отключаю текстовое поле, метка возвращается в исходное положение, даже если в поле есть текст (см. скрипку).

Вот что я делаю:

.txt-group label {
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 10px;
    transition: all 0.2s ease-in-out;
    color: #999999;
}

.txt-group input:focus ~ label,
.txt-group input:valid ~ label,
.txt-group input:valid:disabled ~ label {
    top: -8px;
    font-size: 14px;
}

css disabled-input
person Get Off My Lawn    schedule 02.12.2016    source источник
comment
Предоставьте весь соответствующий код в минимально воспроизводимом примере в самом вопросе, а не на стороннем сайте.   -  person Heretic Monkey    schedule 02.12.2016
comment
Для этого решения может потребоваться JavaScript. Насколько я знаю, :valid — это единственный способ в CSS проверить, есть ли у input содержимое, но он перестает проходить, если элемент имеет атрибуты readonly или disabled.   -  person Jon Uleis    schedule 02.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы объявляете disabled css, вам также не нужен селектор valid.

Попробуй это:

.txt-group input:focus ~ label,
.txt-group input:valid ~ label,
.txt-group input:disabled ~ label {
  top: -8px;
  font-size: 14px;
}

Работает JSFiddle

person knocked loose    schedule 02.12.2016
comment
Этот метод переводит метку в завершенное состояние, даже если отключенное поле input пусто. - person Jon Uleis; 02.12.2016
comment
@JonUleis О, черт, ты прав. Виноват! Я просто отправил текстовое сообщение, если в нем был текст. - person knocked loose; 02.12.2016