Restyle the Search bar in the Left Menu

Follow

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: http://www.colorpicker.com/

Code:

/* 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; } :-moz-placeholder { /* Firefox 18- */   color: rgba( 255,255,255, 0.7 ); } ::-moz-placeholder {  /* Firefox 19+ */   color: rgba( 255,255,255, 0.7 ); } :-ms-input-placeholder {     color: rgba( 255,255,255, 0.7 ); } /*Change color of place holder text*/ ::-webkit-input-placeholder {     color: #000000;  }
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.