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 に答える