Google Custom Search Engine and Bootstrap3 Style issue

css, google-custom-search, twitter-bootstrap-3

Solution

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>

Problem

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 https://i.stack.imgur.com/snXBY.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.

Original source