Expandle Search Bar with SCSS

Simple and elegant search bar that expands on click with a really cool transform affect using SCSS pseudo classes

Level: Intermediate / Advanced

Project at a Glance:

The search bar is broken up into four sections. We will have our main <form> element, an <input> and two <span> elements. One <span> will be our element that expands the search bar and the other will act as the parent of our pseudo elements for our transform affect. When we click on our first <span> element, it will trigger a simple JavaScript function that will toggle a class on and off. When the class is on, the search bar will expand, and when the class is removed, the search bar will be hidden.

Note: We will be using SCSS for this project. SCSS turns your CSS into a styling powerhouse and gives us much more flexibility while keeping everything very readable.

Let's create the Html markup.

<div class="wrapper">
<form action="#" class="searchForm">
  <input class="searchInput" placeholder="What do you want to find?">
     <span class="searchBtn">
       <span class="searchIcon">
     </span>
  </span>
</form>
</div>

 Let's create our variables so we don't have to repeat our yourselves in our code. 

$backgroundColor: #e4136e;
$outlineColor: #fff;
$width:300px;
$formHeight: 45px;

Next, set our html and body to 100% height and width and center our form element in the center of the body. We will also give it some styling and a transition for our slide affect later on.

PRO TIP: Use the transform property to easily center elements.

form {
  position:absolute;
  width:300px;
  height:$formHeight;
  background:transparent;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:0.5s;
  border-radius: 25px 0px 0px 25px;
  box-shadow: 0px 3px 9px -4px #0e0d0e;
  border-bottom: 5px solid #7d0544;
  
}

Now let's nest some styling inside our form selector. We use the & selector to select the parent element and then select our child element. We put all of this inside our parent brackets.

form {
  position:absolute;
  width:300px;
  height:$formHeight;
  background:transparent;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:0.5s;
  border-radius: 25px 0px 0px 25px;
  box-shadow: 0px 3px 9px -4px #0e0d0e;
  border-bottom: 5px solid #7d0544;
  

  & input {
    outline:none;
    background:transparent;
    color:#fff;
    font-size:22px;
    display:none;
    border:0px;
    height:100%;
    border-radius:3px;
    width:0px;
    transition:0.5s;
    
    &::placeholder {
    color:#ff97bb;
  }
    
  }

} 

This just adds some simple styling our input. Notice we set it to a width:0px and display:none. These will get changed later on when we expand our search bar.

Let's create the styling for our span element which will act as our onclick element. We are going to make our span a circle and use ::before and ::after pseudo elements to create a search icon in the center of it. First let's style our .searchBtn element which is our parent span tag.

.searchBtn {
    position: absolute;
    right: -30px;
    top: -10px;
    border-radius: 50%;
    display: block;
    height: 75px;
    width: 75px;
    background: #e4136e;
    box-shadow: 0px 0px 15px -3px #000000;
    transition:0.5s;
  
}

Got a pink-ish circle in the center of your screen now? Yes? Good!  No? Go back and see what happened. 

Now select our .searchIcon child span tag and nest our styling inside the .searchBtn selector for our search icon. Our ::after element will be the circle outline of our search icon and the ::before will be the diagonal line. For our ::before element, we are going to use the transform property to rotate our line to make it diagonal.

.searchBtn {
    position: absolute;
    right: -30px;
    top: -10px;
    border-radius: 50%;
    display: block;
    height: 75px;
    width: 75px;
    background: #e4136e;
    box-shadow: 0px 0px 15px -3px #000000;
    transition:0.5s;
  
    & .searchIcon {
    
      
      &::after {
        content: "";
        position: absolute;
        width:30px;
        height:30px;
        top:14px;
        left:15px;
        border:3px solid #fff;
        border-radius:50%;
        transition:0.5s;
        
      }
      &::before {
        content: "";
        position: absolute;
        height: 15px;
        top:43px;
        left: 46px;
        background: $outlineColor;
        border: 2px solid $outlineColor;
        transition:0.5s;
        transform: rotate(-45deg);
      }    
    } 
  }

Now that's cool! Now that our icon is created with CSS and we have two separate elements, we can manipulate them individually when we click it.

Let's write our JavaScript so we can expand our input, and a CSS class that will toggle when we click our search icon. 

var searchBtn = document.querySelector(".searchBtn");
var form = document.querySelector(".searchForm");

searchBtn.addEventListener("click", expandSearch);

function expandSearch() {
  form.classList.toggle("expandInput");
  searchBtn.classList.toggle("searchBtnExpand");
}

Add this class to your CSS so the form opens and closes. This also adds some padding, gives the form a background color and sets our input to a full width. The padding we added prevents the text in the input field from going outside of our form element when the user is typing in it.

.expandInput {
  width:300px;
  padding: 5px 55px 5px 15px;
  background:$backgroundColor;
  
  & .searchInput {
    display:inline-block;
    width:100%;
  }
  
}

Cool! Now we need to add the fun part. The transform effect for our search icon. We're going to select our pseudo elements and change the position and size so it turns into an 'X' when the class is toggled on. In our JavaScript function, we are calling a .searchBtnExpand class so let's create that.

.searchBtnExpand {
  background:#240536;
  
  & .searchIcon::before {
    content: "";
    position: absolute;
    height: 39px;
    top: 18px;
    left: 36px;
    background: $outlineColor;
    border: 2px solid $outlineColor;
    transform: rotate(-45deg);
  }
  
  & .searchIcon::after {
    content: "";
    position: absolute;
    border-radius:0;
    width:0px;
    height: 39px;
    top: 17px;
    left: 36px;
    background: $outlineColor;
    border: 2px solid $outlineColor;
    transition:0.5s;
    transform: rotate(45deg);
   }
}

And there you have it! Feel free to practice with the transform effects. I highly recommend opening it up in the developer tools of your browser and changing the values of the transform and see how you can manipulate them. 

If you have any questions or comments, let me know below! 

Comments (0)

Rated 0 out of 5 based on 0 voters
There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Rate this post:
Attachments (0 / 3)
Share Your Location
© 2019 The Code Crypt. All Rights Reserved.