-1

なんらかの理由で、検索ボックスに値を入力して検索アイコンを押しても、入力できません。FFでのみ発生します。クロムでは、検索アイコンを押すと機能します。

<div class="col-lg-12">
  <input id="query" name="query" type="search" class="form-control input-lg" value="">
  <button type="submit" class="submit"><i class="fa fa-search"></i></button>
</div>

スタイル:

button.submit {
  border: 0px;
  box-sizing: initial;
  padding: 0px;
  margin: 0px;
}
.fa-search {
  position: absolute;
  top: 8px;
  right: 22px;
}

これを修正する方法はありますか？アイコン検索が押されたときにクリックできるはずのボタンではないということですか？

4

1 に答える 1

1

まず、アイコンにタグを使用しないでください。これ<i>は、テキストとは異なる意味を持つテキストを囲むために使用され、斜体である必要があります。代わり<div>に

ここでの主な問題は、クロスブラウザーで適切に処理されていないマークアップを持つ CSS です。

.fa-searchアイコンを次のように設定していますposition:absolute;が、そのラッパーには位置や高さなどの定義がありません。position:absolute;ボタンはアイコンではなく押すものであるため、ボタンに与える必要がある子をラップしません。

クラスからコメントアウトされたスタイルを削除します。

.bor-header .bor-header-search .fa-search {
  /* top: 8px; */
  /* right: 22px; */
  color: #5D6161;
  font-size: 28px;
  /* position: absolute; */
}
.bor-header .bor-header-search button.submit {
  background-color: #FFF;
  border: 0px none;
  box-sizing: initial;
  padding: 0px;
  margin: 0px;
  top: 2px;
  color: #5D6161;
  font-size: 28px;
  position: absolute;
  width: 25px;
  right: 25px;
  height: 25px;
}

于 2015-05-20T08:04:12.230 に答える