'Ghosting' 或鼠标悬停在 google 自定义搜索引擎按钮上的双图像效果

Question

使用 google 自定义搜索引擎和从原始 16px 图像调整大小的图像，使用一些自定义 CSS，会产生这种奇怪的双重视觉或 'ghosting' 效果您单击该按钮 - 新图像看起来更小且位置不同，两个图像同时出现。

是什么原因造成的，我该如何解决？

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

搜索图标已调整大小 http://s9.postimg.org/4ufkqzc8b/search.png

google cse stylesheet

解决方案需要响应式 CSS。屏幕截图显示 13" 平板电脑视图。Ty。

Answer 1

Google 搜索按钮似乎没有使用背景图像，而是使用了类型设置为图像的输入标签：

<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">

因此，如果您想使用您的图像并隐藏原始图像，只需将高度设置为 0 即可隐藏输入。然后您可以根据需要重新定位背景图像。

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>

话虽如此，您似乎有一些不必要的样式并且过度使用了！重要，您可能需要仔细检查一下并稍微清理一下。

'Ghosting' 或鼠标悬停在 google 自定义搜索引擎按钮上的双图像效果

'Ghosting' or double-image effect from hovering over google custom search engine button

css

click

hover

image-size

google-custom-search