0

始める前に、私はさまざまなアプローチを受け入れるので、すぐに始めてください。また、私は Google 検索アプライアンスを使用しているため、ここで作業している要素のクラス、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 に答える