如何讓我的按鈕出現在表單中輸入框

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往往會表現得更好，如果你能控制你的形式的外部邊界。