0

在我开始之前，我对不同的方法持开放态度，所以开火吧。此外，我使用的是 Google Search Appliance，因此我几乎无法更改我在这里使用的元素的类、ID 和名称。

我想在搜索表单的文本框中添加一个清除按钮，只是一个灰色的“x”。

表格代码：

<div class="input-append">
  <form name="gs" id="suggestion_form" onsubmit="return (this.q.value == '') ? false : true;" action="search" method="GET">
    <input name="q" onkeyup="ss_handleKey(event)" type="text" maxLength="256" autocomplete="off" value="help"/>
      <button class="close" id="clear-button">
    <button name="btnG" class="btn" type="submit">
  ....

我尝试将其附加到搜索框，如下所示：

$("input[name=q]").append('<button id="clear-button" class="close" >x</button>');

尽管按钮出现在源代码中，但它根本没有出现，我什至无法获得蓝色轮廓框。

所以我尝试将它附加到另一个输入按钮，如：

$("button[name=btnG]").append('<button id="clear-button" class="close" >x</button>');

除非我将样式设置在输入框上方，否则该按钮会出现，然后如果它在源代码中突出显示，我只会看到蓝色轮廓。

在此处输入图像描述

我尝试像这样设置 z-index 值，但没有运气：

#clear-button {
    position:relative;
    left: -70px;
    z-index: 5;
}

input[name=q] {
    position:relative;
    z-index: 0;
}

button[name=btnG] {
    position:relative;
    z-index: 0;
}

有人对这个问题有创造性的解决方案吗？谢谢。

4

2 回答 2

0

这可能是您的起点。它需要调整以确保您的布局安全，但您无需了解太多即可完成这项工作。我使用了您提供的样式，并简单地添加了结束标签。颜色和填充只是为了使样式更明显。

.input-append{
    display: inline-block;
    background-color: red;
    padding: 10px;
    position: relative;
}

.input-append .close{
    position: absolute;
    height: 10px;
    width: 10px;
    right: 40px;
    top: 12px;
    background-image: none;
    border: none;
}

我使用的HTML：

<div class="input-append">
     <form name="gs" id="suggestion_form" action="search" method="GET">
         <input name="q" type="text" maxLength="256" autocomplete="off" value="help"/>
         <button class="close" id="clear-button">
         <button name="btnG" class="btn" type="submit">
     </form>
</div>

一旦你有正确地围绕这件作品的元素，你可以将background-image声明中的“无”替换为灰色 X 的实际图像链接。你也可以position:relative;根据你的整个布局进行试验，但absolute如果你可以控制，往往会表现得更好表单的外部边界。

于 2013-10-29T21:10:59.597 回答
0

执行此类操作的最佳方法是将链接标签用作按钮（使用适当的样式使链接标签看起来像按钮）。否则，它会变得非常混乱，不必要。

于 2013-10-29T20:52:06.437 回答