0

我只是通过在输入字段上添加一个透明按钮使我的搜索按钮/图标可点击。不确定这是否是正确的方法，但我想不出除了 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;

}

4

1 回答 1

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

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

于 2013-10-16T13:42:15.897 回答