To give a site an interesting and modern feel, the transition property can be used to expand the length of a search field when the user clicks into it.

Below is the search form we’ll apply our styles to. We have it inside a parent div so that we can set the alignment of where the form will sit.

<div class="search_container">
    <form>
      <input type="text" class="my_search" name="search" placeholder="Search site...">
    </form>
</div>

Add these styles to your style sheet.

.search_container {
    text-align: left;
}
.my_search {
  width: 160px;
  box-sizing: border-box;
  border: #bababa solid thin;
  border-radius: 3px;
  font-size: 16px;
  padding: 12px 20px;
  transition: width 0.4s ease-in-out;
}
.my_search:focus {
  width: 100%;
}
.my_search:focus::placeholder {
    color: white;
}

This code has the .search_container set to the left, and it will expand to the right when clicked in.

.search_container {
    text-align: left;
}

This code has the .search_container set to the right, and it will expand to the left when clicked in.

.search_container {
    text-align: right;
}