День 17: Стилизация поисковой строки, как у Google

TL;DR

Чтобы стилизовать окно поиска, как на сайте google.com, напишите код HTML и CSS, как в этой демонстрации CodePen, которую я сделал. После этого вы получите пользовательский опыт, показанный в GIF-анимации ниже:

Вступление

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

Чтобы сохранить место, пользователю сначала нужно найти это место на карте. Следовательно, окно поиска является одним из основных компонентов пользовательского интерфейса веб-приложения, которое я создаю.

Я хочу, чтобы окно поиска выглядело как то, которое пользователь видит после посещения сайта google.com: Целевая страница Google.com (скриншот автора)

Все знакомы с внешним видом поисковой строки Google. Если сделать окно поиска моего приложения похожим на окно поиска Google, пользователь сразу поймет, что это окно поиска, а не стандартное текстовое поле.

Это совет по дизайну пользовательского интерфейса, основанный на утверждении Якоба Нильсена в 2005 году:

«В ходе пользовательского тестирования люди говорят нам, что они хотят, чтобы поиск на веб-сайтах и в интранетах работал как X, где X — их любимая крупная поисковая система». (Nielsen 2005)

Однако реализация этого дизайна пользовательского интерфейса с помощью HTML/CSS оказывается довольно сложной задачей. В этой статье описывается решение, к которому я пришел методом проб и ошибок. Она включает в себя различные советы по стилизации любого поискового окна. Надеюсь, что когда-нибудь она окажется полезной для вас.

Начнем с HTML.

1. HTML-код для поисковой строки

Семантическим HTML-элементом для поисковой строки является <input type="search">. Одно из преимуществ по сравнению с <input type="text"> заключается в том, что пользователи Chrome и Safari видят кнопку удаления в конце поисковой строки после ввода в нее текста (Coyier 2021 и MDN Contributors 2022).

Кнопка удаления строки поиска в Chrome (скриншот автора)

Кнопка удаления окна поиска в Safari (скриншот автора)

Но к элементу <input> необходимо добавить еще несколько атрибутов:

<input
  aria-label="Search for a place on the map"
  autocomplete="off"
  inputmode="search"
  placeholder="Enter place name or address"
  type="search"
/>

Прежде всего, я использую aria-label для обозначения поисковой строки, чтобы пользователи скринридеров могли определить, для чего предназначен элемент <input>. Я не использую здесь <label>, потому что значок лупы будет играть роль метки для зрячих пользователей (см. MDN Contributors 2022).

Во-вторых, я отключаю функцию автозаполнения браузера по умолчанию с помощью autocomplete="off". Это необходимо потому, что я собираюсь отображать предложения автозаполнения Google Maps API непосредственно под поисковой строкой. Собственные предложения автозаполнения элемента input будут перекрывать предложения Google Maps.

В-третьих, для пользователей смартфонов клавиатура, появляющаяся после нажатия на поле поиска, изменяется с помощью inputmode="search", который меняет метку кнопки возврата на что-то более подходящее для поиска. Подробности см. в Oliff (2019).

Наконец, атрибут placeholder задает текст, который будет показан в поле поиска до того, как пользователь нажмет на него. В отношении содержания текста я следую рекомендациям MDN Contributors (2022), который рекомендует «слово или короткую фразу, демонстрирующую ожидаемый тип данных».

2. SVG-код для значка увеличительного стекла

Я заимствую значок лупы из Material Icons. Загрузив SVG-файл и удалив в нем ненужные куски кода, я получаю следующее:

<svg aria-hidden="true" viewBox="0 0 24 24">
  <path
    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
  />
</svg>

Я добавил aria-hidden=»true», потому что нет смысла рассказывать о наличии значка лупы пользователям, читающим с экрана. Они знают, для чего предназначен элемент, слушая значение его атрибута aria-label (см. раздел 1 выше).

3. Обертывание элементов <svg> и <input> с помощью <div>.

Google помещает значок увеличительного стекла внутрь поисковой строки. Чтобы следовать этому дизайну пользовательского интерфейса, иконка должна быть «абсолютно позиционирована» относительно поисковой строки.

Для этого нам нужно обернуть элементы <input type="search"> и <svg> элементом <div>, который будет «относительно позиционирован». (Подробнее см. раздел 7 ниже).

Пусть имя класса элемента <div> будет searchbox. Таким образом, весь HTML-код выглядит следующим образом:

<div class="searchbox">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path
      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
    />
  </svg>
  <input
    aria-label="Search for a place on the map"
    autocomplete="off"
    inputmode="search"
    placeholder="Enter place name or address"
    type="search"
  />
</div>

Теперь пришло время поработать над CSS.

Таблицы стилей CSS часто трудно поддерживать, потому что вы наверняка забудете, какую роль играет каждое объявление CSS в построении пользовательского интерфейса.

Чтобы облегчить эту задачу, я разбил CSS-объявления по назначению. Давайте начнем с цветовой палитры.

4. Настройка цветовой палитры

Для оформления поисковой строки я использую три цвета.

1. Темно-серый для границы окна поиска, значка лупы и текста ввода пользователя.

2. Светло-серый для текста-заполнителя

3. Светло-синий для границы окна поиска, когда оно сфокусировано.

Установите эти цвета как переменные CSS в корневом элементе, чтобы другие компоненты пользовательского интерфейса в других местах веб-приложения также могли их использовать:

html {
  --dark-gray: rgb(90, 90, 90);
  --light-gray: rgb(148, 148, 148);
  --focus-blue: rgb(69, 159, 189);
}

5. Формирование поисковой строки

Далее я собираюсь придать форму поисковому окну, установив его размер и нарисовав границу.

5.1 Определение высоты на основе минимального размера цели касания

Высота поисковой строки должна быть достаточно большой, чтобы пользователю было легко нажать на нее, чтобы начать вводить текст.

Google рекомендует область 48×48 пикселей в качестве минимального размера цели касания, потому что:

«Область 48×48 пикселей соответствует примерно 9 мм, что соответствует размеру подушечки пальца человека». (Gash et al. 2020)

Поэтому я использую 48px для высоты <input type="search">.

.searchbox {
  --target-size: 48px;
  --box-height: var(--target-size);

  height: var(--box-height);
}
.searchbox input[type='search'] {
  height: 100%;
}

Здесь я использую переменные CSS для записи обоснования стиля, чтобы мой будущий пользователь мог быстро понять код CSS, написанный давным-давно.

Я мог бы напрямую задать height для <input[type="search"]>. Но это не интуитивно, по крайней мере для меня, угадывать высоту родительского элемента по его дочерним элементам. Я предпочитаю определять height для родительского элемента и позволять ему каскадировать вниз по дереву DOM.

5.2 Рисование границы окна поиска

Ширина границы окна поиска, на мой взгляд, лучше всего равна 2px. Граница в 1px слишком тонкая, чтобы пользователь мог заметить поисковую строку. Более толстая, чем 2px, заставит поисковую строку выглядеть неумело.

Давайте нарисуем границу:

.searchbox {
  --target-size: 48px;
  --box-height: var(--target-size);
  --border-width: 2px; /* ADDED */

  height: var(--box-height);
}
.searchbox input[type='search'] {
  border: var(--border-width) solid var(--dark-gray); /* ADDED */
  height: 100%;
}

Чтобы повторить форму поискового окна Google, обе стороны окна должны быть полукругами. То есть border-radius должен быть равен половине высоты окна:

.searchbox {
  --target-size: 48px;
  --box-height: var(--target-size);
  --border-width: 2px;
  --border-radius: calc(var(--box-height) / 2); /* ADDED */

  height: var(--box-height);
}
.searchbox input[type='search'] {
  border: var(--border-width) solid var(--dark-gray);
  border-radius: var(--border-radius); /* ADDED */
  height: 100%;
}

Я определяю радиус границы как переменную CSS, потому что это значение будет использоваться для другой цели позже (см. раздел 7.2 ниже).

5.3 Установка ширины окна поиска

Для мобильных устройств окно поиска должно быть как можно шире, с некоторыми боковыми полями, чтобы сохранить расстояние от краев экрана.

Однако для широких экранов, таких как ноутбуки, окно поиска не должно быть таким широким, как экраны, так же как и абзацы текста. Очень длинную строку текста трудно читать.

Учитывая это соображение, для задания ширины поисковой строки целесообразно использовать max-width.

Ширина поисковой строки Google составляет 561px для самых широких экранов. Я не знаю, откуда взялось это магическое число. Но я просто следую этой «конвенции»:

.searchbox {
  --target-size: 48px;
  --box-height: var(--target-size);
  --border-width: 2px;
  --border-radius: calc(var(--box-height) / 2);

  height: var(--box-height);
  max-width: 561px; /* ADDED */
}
.searchbox input[type='search'] {
  border: var(--border-width) solid var(--dark-gray);
  border-radius: var(--border-radius);
  height: 100%;
  width: 100%; /* ADDED */
}

Ширина <input type="search"> должна быть 100%, чтобы отменить стиль браузера по умолчанию.

6. Стилизация подкомпонентов нашего окна поиска

Наше окно поиска имеет два подкомпонента: значок лупы и текст окна поиска.

Стандартный подход заключается в назначении класса для каждого подкомпонента, чтобы определить его стиль, например searchbox__icon в соглашении BEM.

Но я бы предпочел использовать комбинатор потомков,

.searchbox svg {
  /* Style for the magnifying glass icon */
}
.searchbox input[type='search'] {
  /* Style for the search box text */
}

Таким образом, CSS-код сам объяснит, что набор CSS-объявлений определен для подкомпонента поисковой строки, а не для независимого компонента. Это также избавляет меня от необходимости придумывать дополнительные имена классов. Именование — это самое сложное в кодировании.

6.1 Стилизация значка увеличительного стекла

Методом проб и ошибок я пришел к выводу, что значок лупы выглядит лучше всего, когда его размер составляет три четверти высоты окна поиска:

.searchbox {
  --icon-size: calc(var(--box-height) * 3 / 4);
}
.searchbox svg {
  fill: var(--dark-gray);
  height: var(--icon-size);
  width: var(--icon-size);
}

С помощью свойства fill я подбираю цвет значка к границе окна поиска.

6.2 Стилизация текста окна поиска

Элемент <input> не наследует значения свойства font от своего родителя. Поэтому нам необходимо явно задать стиль шрифта.

.searchbox input[type='search'] {
  -webkit-appearance: none; /* for Safari */
  color: var(--dark-gray);
  font-family: 'Noto Sans', Verdana, sans-serif;
  font-size: 1rem;
}

Safari игнорирует font-size для <input type="search">. Чтобы отключить это поведение, нам нужен -webkit-appearance: none. См. Coyier (2021).

Цвет текста устанавливается таким образом, чтобы он совпадал с цветом иконки, а также с цветом границы окна поиска.

Нам также необходимо задать стиль текста-заполнителя. Стиль шрифта наследуется, а цвет текста — нет. Чтобы придать стиль тексту-заполнителю, используйте псевдоэлемент ::placeholder:

.searchbox input[type='search']::placeholder {
  color: var(--light-gray);
  opacity: 1;
}

Если текст-заполнитель имеет тот же цвет, что и граница поисковой строки, это может создать неверное впечатление, что текст уже заполнен. Принято, чтобы текст заполнителя был более светлого оттенка серого, чем граница поисковой строки.

Но одного свойства color недостаточно. Стиль Firefox по умолчанию делает текст-заполнитель полупрозрачным. Свойство opacity: 1 исправляет это.

Как мы уже видели, стиль по умолчанию <input type="search"> в разных браузерах отличается неожиданным образом. Это усложняет стилизацию окна поиска. Мы увидим больше примеров этого ниже.

7. Позиционирование значка и текстового поля в окне поиска

Следующим шагом будет настройка позиционирования субкомпонентов внутри поисковой строки.

7.1 Размещение иконки внутри поля поиска

Мне нужно перекрыть иконку над поисковой строкой. Стандартной техникой CSS для перекрытия является относительно-абсолютное позиционирование (см. обзор для начинающих в James 2017):

.searchbox {
  position: relative;
}
.searchbox svg {
  position: absolute;
}

Вот почему мне пришлось обернуть значок и поле поиска элементом <div> (см. раздел 3 выше).

7.2 Горизонтальные интервалы

Теперь давайте установим горизонтальные поля. Во-первых, я хочу, чтобы значок располагался на расстоянии половины радиуса границы от левого края окна поиска:

.searchbox {
  --side-margin: calc(var(--border-radius) / 2); /* ADDED */

  position: relative;
}
.searchbox svg {
  position: absolute;
  left: var(--side-margin); /* ADDED */
}

Затем я хочу, чтобы значок был оптически выровнен по центру между левым краем окна поиска и левым краем текста в окне поиска (текст-заполнитель или текст, вводимый пользователем).

.searchbox {
  --side-margin: calc(var(--border-radius) / 2);
  position: relative;
}
.searchbox svg {
  position: absolute;
  left: var(--side-margin);
}
/* ADDED from here */
.searchbox input[type='search'] {
  padding-left: calc(var(--side-margin) + var(--icon-size) + 4px);
}

Оптическое выравнивание по центру — важная техника для графических дизайнеров. Большинство символов и значков имеют разное количество белого пространства с каждой стороны. У значка лупы больше белого пространства справа, потому что тонкая ручка торчит внизу справа. Чтобы человеческие глаза видели значок выровненным по центру, нам нужно меньше белого пространства справа от значка.

Методом проб и ошибок я пришел к выводу, что 4px — это магическое число для правого белого пространства, чтобы добиться оптического выравнивания иконки по центру.

Чтобы реализовать это расстояние, нам нужно установить значение параметра padding-left равным сумме ширины иконки и ее боковых полей. Вот почему у меня есть следующее объявление CSS:

padding-left: calc(var(--side-margin) + var(--icon-size) + 4px);

Наконец, мне нужно задать пространство между правым краем поисковой строки и концом текста (или кнопкой удаления, которая появляется в Chrome и Safari после того, как пользователь введет текст; подробнее см. раздел 10 ниже).

Симметричный внешний вид всегда выглядит прилично для наших глаз. Поэтому я выбираю для значка пространство, равное левому краю:

.searchbox {
  --side-margin: calc(var(--border-radius) / 2);
  position: relative;
}
.searchbox svg {
  position: absolute;
  left: var(--side-margin);
}
.searchbox input[type='search'] {
  padding-left: calc(var(--side-margin) + var(--icon-size) + 4px);
  padding-right: var(--side-margin); /* ADDED */
}

Приведенный выше код CSS работает идеально, за исключением Safari, который вставляет немного горизонтального пространства слева от текстового поля. Свойство padding не отменяет этот промежуток.

Решение этой проблемы предлагается в строках 136-138 RESS, современной таблицы стилей CSS с перезагрузкой, созданной Линхаресом (2022):

input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

В <input type="search"> есть несколько непонятных псевдоэлементов для браузеров Webkit, как этот (Peter 2010). Мы увидим еще один из них в действии в разделе 10 ниже.

7.3 Вертикальный интервал

Я хочу, чтобы значок лупы был вертикально выровнен по центру в окне поиска.

Обычно флексбокс — самый простой способ вертикального выравнивания элементов по центру. Однако в моем случае я использую технику относительно-абсолютного позиционирования значка. Поэтому лучше всего установить значения top и bottom равными:

.searchbox {
  --side-margin: calc(var(--border-radius) / 2);
  --icon-vertical-margin: calc(
    (var(--box-height) - var(--icon-size)) / 2
  ); /* ADDED */

  position: relative;
}
.searchbox svg {
  position: absolute;
  left: var(--side-margin);
  top: var(--icon-vertical-margin); /* ADDED */
  bottom: var(--icon-vertical-margin); /* ADDED */
}

Мы склонны думать, что стилизация уже завершена. Однако для интерактивных элементов, таких как окно поиска, необходимо стилизовать еще одну важную вещь: состояние фокуса.

8. Стилизация состояния фокуса

8.1 Использование border и box-shadow для стилизации кольца фокуса

Кольцо фокуса обычно стилизуется с помощью свойства outline. Но я хочу, чтобы кольцо фокуса светилось, как в фрагменте кода Coyier (2012):

Чтобы добиться такого стиля, я использую комбинацию border и box-shadow:

.searchbox input[type='search']:focus {
  border-color: var(--focus-blue);
  box-shadow: 0px 0px 5px var(--focus-blue);
}

Однако Суэйдан (2021) рекомендует добавить прозрачный контур в качестве запасного варианта для принудительных цветовых режимов, который удалит кольцо фокуса, стилизованное с помощью свойств background, border и/или box-shadow. Следуя ее предложению, я добавляю:

.searchbox input[type='search']:focus {
  border-color: var(--focus-blue);
  box-shadow: 0px 0px 5px var(--focus-blue);
  outline: 1px solid transparent; /* ADDED */
}

Явная стилизация свойства outline имеет дополнительное преимущество: она удаляет кольцо фокуса браузера по умолчанию, что обычно делается с помощью outline: none.

9. Предоставление пользователю возможности нажать на иконку для фокусировки поисковой строки

На этом этапе стилизация поисковой строки, по сути, завершена. Однако я заметил одну неудовлетворительную вещь.

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

Чтобы решить эту проблему, значок необходимо отобразить под окном поиска:

.searchbox svg {
  z-index: -1;
}
.searchbox input[type='search'] {
  background: transparent;
}

Поскольку <div class="searchbox"> расположен относительно (см. раздел 7 выше), он создает свой собственный контекст стекирования (Comeau 2022). Если установить z-index равным -1, элемент <svg> окажется под всеми дочерними элементами <div> (то есть <input type="search"> в нашем случае).

Но элемент <input> по умолчанию имеет белый фон, скрывающий расположенный под ним элемент <svg>. Поэтому нам нужно сделать его прозрачным.

Ограничения

Это решение не будет работать, если поисковой строке нужен отдельный цвет фона.

Если вы знаете альтернативное решение, которое позволяет сделать непрозрачный фон для окна поиска, пожалуйста, сообщите мне.

10. Настройка стиля кнопки удаления текста для Chrome и Safari

Как описано выше в разделе 1, одним из преимуществ использования <input type="search"> вместо <input type="text"> является то, что после ввода пользователем текста Chrome и Safari отображают кнопку удаления в окне поиска, чтобы пользователь мог удалить весь текст, нажав на нее.

Но стиль кнопки удаления по умолчанию отличается в Chrome и Safari, и это не согласуется с остальным дизайном моего веб-приложения.

Кнопка удаления строки поиска в Chrome (скриншот автора)

Кнопка удаления строки поиска в Safari (скриншот автора)

Чтобы настроить стиль кнопки удаления, мы можем использовать псевдоэлемент ::-webkit-search-cancel-button (Coyier (2010)):

.searchbox input[type='search']::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;
  /* Now your own custom styles */
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(148, 148, 148)' %3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' /%3E%3C/svg%3E%0A");
  height: calc(var(--box-height) / 2);
  width: calc(var(--box-height) / 2);
}

Сначала удалите стиль браузера по умолчанию с помощью -webkit-appearance: none;. Затем мы можем использовать свойства background, height и width для формирования нашей собственной кнопки удаления.

В приведенном выше коде CSS я использую SVG-изображение значка креста из Material Icons. Я редактирую код SVG так, чтобы цвет значка был задан с помощью fill="rgb(148, 148, 148)".

Затем, следуя Coyier (2013), я преобразую SVG-код в URL-адрес данных для использования в качестве значения background-image с помощью URL-encoder для SVG.

Наконец, я масштабирую иконку до половины размера высоты поисковой строки.

Ограничения

Этот подход работает, если нам не нужно заботиться о темном режиме. Чтобы переключить цвет между светлым и темным режимами, нам нужно заменить весь URL данных. Это требует довольно много дублирования кода.

Если вы знаете лучший подход к настройке кнопки удаления, пожалуйста, дайте мне знать.

11. Устранение вспышки серого фона при нажатии на строку поиска в iOS Safari

А вот и последняя неприятность с поисковой строкой. На этот раз это iOS Safari.

По умолчанию, <input type="search"> будет мигать серым фоном, когда пользователь коснется его на iOS Safari. Это излишне, поскольку нажатие на поле поиска вызывает появление клавиатуры в нижней части экрана. Нам не нужна дополнительная обратная связь с пользователем для указания того, что поисковая строка теперь готова к вводу текста.

Чтобы отключить эту функцию, используйте непонятное свойство CSS, специфичное для Webkit:

input[type='search'] {
  -webkit-tap-highlight-color: transparent;
}

Подробности см. в статье Apple Developer (2016).

Заключительные слова

Вот и все о стилизации поисковой строки, как у Google. Вот демонстрация с помощью CodePen.

Я удивлен огромным количеством вещей, которые нужно помнить для стилизации очень простого окна поиска…

Ссылки

Comeau, Josh W. (2022) «Что за черт, z-index??», joshwcomeau.com, Jan 27, 2022.

Coyier, Chris (2010) «WebKit HTML5 Search Inputs», CSS-Tricks, Aug 25, 2010.

Койер, Крис (2012) «Светящиеся синие выделения ввода», CSS-Tricks, 11 апреля 2012 г.

Койер, Крис (2013) «Использование SVG», CSS-Tricks, 5 марта 2013 г.

Койер, Крис (2021) «Что вы получаете за использование поискового типа ввода?», CSS-Tricks, 17 ноября 2021 г.

Gash, Dave, Meggin Kearney, Rachel Andrew, Rob Dodson, and Patrick H. Lauke (2020) «Accessible tap targets», web.dev, Mar 31, 2020.

Джеймс, Оливер (2017) «Расширенное позиционирование», Interneting Is Hard, 2017.

Linhares, Filipe (2022) «ress», GitHub, последнее обновление 9 марта 2022 г.

MDN Contributors (2022) «», MDN Web Docs, последнее изменение 9 августа 2022 г.

Nielsen, Jakob (2005) «Mental Models For Search Are Getting Firmer», Nielsen Norman Group, May 8, 2005.

Oliff (2019) «Everything You Ever Wanted to Know About inputmode», CSS-Tricks, May 17, 2019.

Питер (2010) «Этого недостаточно. Чтобы избавиться от лишнего padding, вам нужно…», CSS-Tricks, Aug 26, 2010.

Soueidan, Sara (2021) «Руководство по проектированию доступных, соответствующих WCAG индикаторов фокуса», sarasoueidan.com, Aug 13, 2021.