html - 搜索按钮阴影

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..
}

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