title: How to customize the google custom search bar API with own css
body: <p>This might be pretty simple though, but I can't figure out how to customize Google custom search bar API with my site css. I have tried applying several predefined css classes with restrained <code>div</code> width but its seems the search bar its still out of style with and <code>iframe</code> look.</p>
  
  <p>This is my code: how do I apply a css to it
  </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;div width="100%" id="cse" style="width: 100%;"&gt;Loading&lt;/div&gt;
          &lt;script src="http://www.google.com/jsapi" type="text/javascript"&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt; 
              google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
              google.setOnLoadCallback(function() {
                  var customSearchOptions = {};
                  var customSearchControl = new google.search.CustomSearchControl('009437919812836441502:rka9ujkwvwe', customSearchOptions);
                  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); 
                  customSearchControl.draw('cse');
              }, true);
          &lt;/script&gt;
      &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Or is it possible at all?</p>