« Ghosting » ou double effet image de planer sur le bouton du moteur de recherche Google personnalisé

Question

Utilisation de Google moteur de recherche personnalisé avec une image qui a été redimensionnée de l'original 16px un, avec quelques CSS personnalisé, donne cette double vision étrange ou ' effet fantôme lorsque vous cliquez sur le bouton - la nouvelle image apparaît plus petit et dans une position différente, et les deux images apparaissent à la fois.

Quelles sont les causes et ce comment puis-je résoudre ce problème?

JSFiddle

/* 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; 
 
}

\t <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 redimensionnées http://s9.postimg.org/4ufkqzc8b/search.png

google cse stylesheet

solution doit travailler avec CSS réactif. Captures d'écran Afficher la vue de la tablette 13" Ty

Answer 1

Il semble que le bouton de recherche Google est de ne pas utiliser un fond d'image, il utilise une balise d'entrée avec le type mis à l'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"> 

Alors si vous voulez utiliser votre image et de cacher l'original, vous pouvez simplement masquer l'entrée en réglant la hauteur à 0. Ensuite, vous pouvez recadrez le background-image au besoin.

Working Example

/* 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>

Cela dit, il semble que vous avez des styles inutiles et sur l'utilisation! Importante, vous pouvez passer et nettoyer un peu.