如何让我的按钮出现在表单输入框中

Question

在我开始之前，我对不同的方法持开放态度。此外，我正在使用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;
}

任何人都有这个问题的创意解决方案？感谢。

Answer 1

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

Answer 2

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

.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往往会表现得更好。