Restyle the Search bar in the Left Menu


This will restyle the search bar in the left menu. The search bar will be made darker, and the shape will be made rectangular. Text in the search bar will be changed as well. 

Important notes to make this code work: 

  • Change the bolded text in the code to be applicable for your app (colour codes, links to images, etc)
  • You can use this site to help you select the Hex codes for your colours:


/* Refined Search field styling */
.menu-input, .menu-search {
   border-radius: 3px;
   background: rgba( 0, 0, 0, 0.2 );
   border: 1px solid rgba( 0,0,0, 0.2 );
   color: #fff;

.menu-input, .menu-search:focus {    border-radius: 3px;    background: rgba( 255,255,255, 0.2 );    border: 1px solid rgba( 0,0,0, 0.2 );    color:#fff;
0 out of 0 found this helpful



Article is closed for comments.