Search bar

Search bars are mixtures of input with search type and a search button, they are so practical you can change their size of colors based on your needs.

index.html

<div class="search-bar">
  <input type="search" placeholder="Search something..." />
  <button class="search-button" aria-label="Search"></button>
</div>

Sizes

To change the input bar size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="search-bar size-sm">
  <input type="search" placeholder="Search something..." />
  <button class="search-button" aria-label="Search"></button>
</div>

<div class="search-bar size-lg">
  <input type="search" placeholder="Search something..." />
  <button class="search-button" aria-label="Search"></button>
</div>

<div class="search-bar size-2x">
  <input type="search" placeholder="Search something..." />
  <button class="search-button" aria-label="Search"></button>
</div>

Colors

There are helper classes for styling search bar, first read about color setter classes. For search bars, you should add these classes to the button and input separately.

index.html

<div class="search-bar">
  <input class="style-dark" type="search" placeholder="Search something..." />
  <button class="search-button style-dark" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-light" type="search" placeholder="Search something..." />
  <button class="search-button style-light" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-green-light" type="search" placeholder="Search something..." />
  <button class="search-button style-green" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-blue" type="search" placeholder="Search something..." />
  <button class="search-button style-blue" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-red" type="search" placeholder="Search something..." />
  <button class="search-button style-red-light" aria-label="Search"></button>
</div>

<div class="search-bar">
  <input class="style-orange" type="search" placeholder="Search something..." />
  <button class="search-button style-orange-light" aria-label="Search"></button>
</div>