How to remove default search button in search module

Question

I am a neophyte with code and css and normally work with Muse. But I am currently trying to customize the appearance of the search module so that it works with the website it will be serving. I have  accomplished a large part of what I've been attempting, but have hit a snag in removing the default search button (CAT_Search). I've placed the image I want to use no problem, but it is contained in some weird gray beveled box with the original 'Search' text overlapping my image.
I have been making the rounds of tech support, tutorials, and every documented article on the search module and can find nothing that address this specific issue. Any help would be greatly appreciated! I am enclosing the what I've done so far below.
Thanks!
Paula
<style type="text/css">
body form {
  width: 163px;
  height: 48px;
  form-top-right-radius: 5px;
  form-bottom-right-radius: 5px;
  background-image: url(http://corehog.businesscatalyst.com/images/search.png);
.search-box {
  color: #999966;
  font-family: lato;
  font-style: normal;
  font-weight: 100;
  width: 86px;
  height: 24px;
  border: none;
  max-width: 86px;
  opacity: 0%;
  max-height: 24px;
  margin-left: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
.cat_button {
  width: 32px;
  height: 24px;
  border: none
  background-color: none;
  background-image: url(http://corehog.businesscatalyst.com/images/search-button.png);
  margin-left: 12px;
  margin-top: 12px;
  margin-right: 20px;
  margin-bottom: 12px;
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/lato:n1:default.js" type="text/javascript"></script>
<form name="catsearchform87352" method="post" action="/Default.aspx?SiteSearchID=3752&PageID=/http://corehog.businesscatalyst.com/search-results.html"><div><input class="search-box" type="text" name="CAT_Search" id="CAT_Search" /><input class="cat_button" type="submit" value="Search" /></div></form>
{module_searchresults}

Answer 1

Hi Ramandeep Nanda,
Thanks for the reply.
I followed a slightly different approach than the one mentioned in your post.
I have not used any client side javascript attributes.I got the inputListOfValues Component from the launch listener event ( launchPopupEvent.getComponent() ) and in the launch listener i am setting richQuery.setModeChangeVisible(false);
It is hiding the button now but only for the first invocation of the search dialog, it is not working.
More specifically, for the first invocation of the search dialog, Iterator facetNames = inputListOfValues.getFacetNames(); is not returning the child components and hence the button is not being hidden.
Any idea why this might be happening?
Thanks,
Vikas