От автора: я думаю, что селектор :placeholder-shown невероятно крут. Он позволяет выбрать заполнитель для input (<input placeholder=»…»>), когда этот заполнитель присутствует. В смысле, когда в поле еще не введено значение. Вы можете подумать, что input[value] можете это сделать или помочь сопоставить действительное значение, но это не так.
Это делает :placeholder-shown — одно из немногих имеющихся у нас CSS-свойств, которые могут реагировать на инициируемое пользователем состояние, в дополнение к :hover и ему подобным, :checked (хак чек-бокса!) и также невероятный :focus-within.
Один из способов, которым мы можем использовать его, это проверить, вводил ли пользователь какой-либо текст в поле поиска. Если да, то мы отображаем кнопку поиска визуально (никогда не скрывайте ее для вспомогательных технологий). Если нет, то оставляем ее скрытой. Это просто забавная маленькая «экономящая место» техника, не ужасная в отличие от всплывающих меток.
Итак, возможно, мы начнем с семантической формы поиска:
<form action="#" method="GET" class="search-form"> <!-- Placeholders aren't labels! So let's have a real label --> <label for="search" class="screen-reader-text">Search</label> <input id="search" type="search" class="search-input" placeholder="Enter search terms..."> <button class="search-button">Search</button> </form>
Мы скрываем метку поиска визуально с помощью одного из специальных классов только для программ чтения с экрана, потому что она всегда будет скрыта визуально. Но кнопку мы скроем, смещая ее за пределы формы с overflow: hidden.
.search-form { /* we'll re-use this number, so DRYing up */ --searchButtonWidth: 75px; overflow: hidden; position: relative;
} .search-input { /* take full width of form */ width: 100%;
} .search-button { position: absolute; /* push outside the form, hiding it */ left: 100%; width: var(--searchButtonWidth);
}Хитрость заключается в том, чтобы вернуть кнопку поиска обратно, когда заполнитель исчезнет (пользователь ввел значение):
/* ... */ .search-input:not(:placeholder-shown) ~ .search-button { /* pull back the negative value of the width */ transform: translateX(calc(-1 * var(--searchButtonWidth)));
}
.search-button { position: absolute; left: 100%; width: var(--searchButtonWidth); /* animate it */ transition: 0.2s;
}Что дает нам:
Я знаю, что использование атрибута placeholder вообще сомнительно, поэтому ваше решение может отличаться. Я признаю, что в основном меня заинтриговали аспекты обработки состояния непосредственно в CSS и то, как его можно использовать — например, печально известный хак чек-бокса.
Поддержка также довольно хороша. Один из тех случаев, когда Edge — это настоящий Chromium, в чистом виде. Данные о поддержке браузера взяты с Caniuse, где вы можете найти более подробную информацию. Число указывает, что браузер поддерживает функцию с этой версии и выше.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.