How do I clear a search box with an 'x' in bootstrap 3?

Question

Having some trouble with bootstrap, so some help would be awesome. Thanks

What I would like:(top part)

Answer 1

Here is my working solution with search and clear icon for Angularjs\Bootstrap with CSS.

    

                    
                    

                        

                            
                        
                        

                            
                        
                    
                        
                

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}