Google Custom Search Engine and Bootstrap3 Style issue - css

Question

I am trying to integrate Google CSE in a page with BS3. Looks like BS3 is messing up the search box and button.
http://jsfiddle.net/DTcHh/509/
This is how the code looks in IE and Chrome http://i.imgur.com/vungb7v.png
The search icon is missing in the button and the bottom bar is missing in Chrome.
I tried playing around with
input.gsc-search-button
.reset-box-sizing *
but since I have only basic CSS skills I cannot figure out how to fix this. Can someone please tell me how should I fix this so that the box and button looks fine in IE and Non IE browsers.

Answer 1

All what you have to do is to replace the CSS values that are making problems and to know what you must replace and what are the values that you must change to is to take advantage from Google Chrome's "Inspect Element" feature.
You can see the effect on my own server on :
http://link-sa.ga/gcse/
Download the source code:
https://www.dropbox.com/s/bo01xp2agvp7w4e/index.html
JSfiddle:
http://jsfiddle.net/rsm23/GPLyM/
Read the comments under the GCSE call for the css code is should be like this :
<gcse:search></gcse:search>
<style type="text/css">
body {
margin: 10px;
}
#gsc-iw-id1{
height: 30px;
border-color: #898989;
}
input.gsc-search-button-v2{
width: 71px;
height: 29px;
}
</style>