Using google custom search engine with an image which has been resized from the original 16px one, with some custom CSS, gives this odd double-vision or 'ghosting' effect when you click the button - the new image appears smaller and in a different position, and both images appear at once.
What causes this and how do I fix it?
/* Search box styling adjusts google's css http://www.google.com/cse/style/look/v2/default.css */
.gsc-control-cse,
.gsc-control-cse-en {
width: 85% !important;
padding-left: 0 !important;
margin-left: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
table.gsc-search-box {
vertical-align: middle;
text-align: left;
width: 90%;
padding-left: 0;
padding-top: 0;
margin-left: 0;
margin-top: 0;
}
.gsc-search-button {
width: 1%;
vertical-align: middle;
text-align: center;
}
.input.gsc-search-button-v2 {
min-height: 18px;
vertical-align: middle;
text-align: center;
padding-left: 0;
margin-left: 0;
}
#cse {
width: 85%;
/* make sure you don't use inline width */
margin: 0;
padding: 0;
}
input.gsc-search-button,
input.gsc-search-button:hover,
input.gsc-search-button:focus,
gsc-search-button-v2 {
background-image: url(http://s9.postimg.org/4ufkqzc8b/search.png) !important;
background-repeat: no-repeat;
width: 100%;
height: 100%;
overflow: hidden;
min-height: 1.8em;
padding: 18px 20px 14px 18px !important;
margin: 5px;
background-position: 4px 4px;
/* fix for doubled search icon */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input#gsc-i-id1.gsc-input {
width: 90%;
min-height: 1.8em;
padding-left: 0;
margin-left: 0;
margin-top: 0;
padding-top: 0
}
.gsc-resultsHeader {
visibility: hidden;
}
.gsc-selected-option-container {
min-width: 15em !important;
}
.gsc-selected-option-container.gsc-inline-block gsc-selected-option-container.gsc-inline-block {
min-width: 15em;
}
.gsc-thumbnail-inside {
line-height: 1.5em;
} <h4 style="padding-after:0;margin-after:0;padding-bottom:0em;margin-bottom:0em">Search this site</h4>
<!-- search button appearance needs h4 set to padding-bottom:0em;margin-bottom:0em"of ghosting effect appears -->
<script>
(function() {
var cx = '006618322252347156264:kh6fe9kvusc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search enableAutoComplete="true"></gcse:search>search icon resized http://s9.postimg.org/4ufkqzc8b/search.png
Solution needs to work with responsive CSS. Screenshots show 13" tablet view. Ty.
It looks like the Google search button isn't using a background-image, it is using an input tag with the type set to image:
<input title="search" class="gsc-search-button gsc-search-button-v2" src="http://www.google.com/uds/css/v2/search_box_icon.png" type="image">
So if you want to use your image and hide the original, you can just hide the input by setting the height to 0. Then you can re-position your background-image as needed.
/* Search box styling adjusts google's css http://www.google.com/cse/style/look/v2/default.css */
.gsc-control-cse, .gsc-control-cse-en {
width:85% !important;
padding-left:0 !important;
margin-left:0 !important;
margin-top:0 !important;
padding-top:0 !important;
}
table.gsc-search-box {
vertical-align: middle;
text-align:left;
width:90%;
padding-left:0;
padding-top:0;
margin-left:0;
margin-top:0;
}
.gsc-search-button {
height: 0;/* see change here *************************/
vertical-align: middle;
text-align: center;
}
.input.gsc-search-button-v2 {
min-height: 18px;
vertical-align: middle;
text-align: center;
padding-left:0;
margin-left:0;
}
#cse {
width: 85%;
/* make sure you don't use inline width */
margin: 0;
padding: 0;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus, gsc-search-button-v2 {
background-image: url(http://s9.postimg.org/4ufkqzc8b/search.png) !important;
background-repeat:no-repeat;
/*width: 100%;
height: 100%;*/
overflow: hidden;
/*min-height: 1.8em;*/
padding: 18px 20px 14px 18px !important;
/*margin: 5px; */
background-position: center;/* see change here *************************/
/* fix for doubled search icon */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input#gsc-i-id1.gsc-input {
width: 90%;
min-height: 1.8em;
padding-left:0;
margin-left:0;
margin-top:0;
padding-top:0
}
.gsc-resultsHeader {
visibility:hidden;
}
.gsc-selected-option-container {
min-width:15em !important;
}
.gsc-selected-option-container.gsc-inline-block gsc-selected-option-container.gsc-inline-block {
min-width:15em;
}
.gsc-thumbnail-inside {
line-height:1.5em;
}<h4 style="padding-after:0;margin-after:0;padding-bottom:0em;margin-bottom:0em">Search this site</h4>
<!-- search button appearance needs h4 set to padding-bottom:0em;margin-bottom:0em"of ghosting effect appears -->
<script>
(function() {
var cx = '006618322252347156264:kh6fe9kvusc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search enableAutoComplete="true"></gcse:search>With that said it looks like you have some unnecessary styles and over use !important, you may want to go through and clean it up a bit.