css скрыть пустое поле ввода текста

Question

можно ли с помощью css скрывать пустые input text?

.textbox{
    display: block;
}


.textbox[value=""]{
    display: none;// всегда видно
}

.textbox:not([value]){
    display: none;// всегда скрыто
}

Больше ничего в голову не приходит. Есть ли способ на css?

Answer 1

Ну например вот так можно. Однако, если поле скрыто, как туда что-то можно ввести? Если ничего нельзя ввести, то почему бы не воспользоваться атрибутом disabled или type="hidden"?

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100dvh;
  gap: 1em;
}

input {
  padding: .5em 1em;
}

input:placeholder-shown {
  opacity: .2;
}

<input type="text" placeholder="" value="Заполненное поле">
<input type="text" placeholder="">

БЛОГ НА HUSL

css скрыть пустое поле ввода текста

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