搜索按钮阴影

Question

我只是通过在输入字段上添加透明按钮使我的搜索按钮/图标可点击。不确定这是正确的方法，但我想不出jQuery / javascript之外的任何其他我不是很有经验的东西。似乎工作正常，除了隐藏的按钮没有完全隐藏...我已经使背景透明，并说border: none但我可以看到它的一点阴影。看下面的截图并戴上一些眼镜，因为它几乎没有引人注意。仍然很烦我。我查看了我的样式表，找不到输入的任何阴影设置，所以不确定如何解决这个问题。

HTML：

<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">            
    <span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>          
    <input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
    <input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />       
</form>       
</div>

CSS：

    input[type="submit"] {
      cursor: pointer;
      -webkit-appearance:none;

}

Answer 1

我猜这个按钮的border-top，或按钮没有完全隐藏。所以你可以尝试一下：

<input type="submit" />

然后使用CSS将图像更改为提交按钮的背景图像。所以当你点击表格时会提交！

input[type="submit"] {
  /* here, you can change the background-image
   * background-image: url('../link/to/file.png');
   */
}

如果你真的想摆脱它，那么删除上面的图像，并将其用作按钮的背景图像。这样您就不必担心按钮了。

您可以使用以下方式隐藏按钮：

input[type="submit"] {
 opacity:0.0; 
 filter:alpha(opacity=00); // for ie..
}

此外，如果您提供了指向该网站的链接，那么我们可能已经注意到导致该问题的原因，或者只是源代码。