0

次のようなマークアップがあります。

<div class="button">
   <span class="image"></span>
   <input type="submit" value="Test button">
</div>

CSS：

.button{
  background: url('http://img33.imageshack.us/img33/4108/leftd.png');
  width: 10px;
  display: inline-block;
  height: 15px;
}

.image{
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
  margin-left: 13px;
}

.button input{
  background: url('http://img853.imageshack.us/img853/7212/righthw.png');
  border: 0;
  display: block;
  font: 11px sans-serif;
  margin-left: 10px;
  padding-left: 23px;
  padding-right: 10px;
  color: #FFFFFF;
  width: auto;
  height: 15px;
}

送信ボタンのコードはバックエンドによって生成されますが、変更することはできませんが、spansとdivsはテンプレートの一部であるため編集可能です。問題をよりよく示すために、単純なグラフィックを使用して簡単な例を作成しました：http: //jsfiddle.net/UBS3z/

divは引き戸の左側を保持し、幅は約10ピクセルです。スパンには、テキストの左側に配置されるアイコンがあります。最後に、送信ボタン自体があります。

問題は、視覚的には問題ないように見えますが、ユーザーが左側の引き戸または画像が表示されている領域をクリックしたときに、ボタンがクリックを記録しないことです。ボタンの巨大なチャンクはクリックできないので、これは非常に悪いです！これは、ボタンをクリックすることで示されます。クリックが登録されている場合、スクリプトはコンソールにログを記録します。

CSSを使用してこれらの領域をクリック可能にする方法はありますか？これはJavascriptを使用して解決できるかもしれないと思いますが、CSSソリューションをお勧めします。

4

2 に答える 2

1

コードとデモについてはフィドルを参照してください

フィドル： http： //jsfiddle.net/UBS3z/6/

デモ： http： //jsfiddle.net/UBS3z/6/embedded/result/

はい、あなたは正しいです。cssを使用することは可能です。要件のデモのみを参照してください。

于 2012-04-13T12:17:15.763 に答える
0

私はjavascriptソリューションを使用することになりました。Dineshのソリューションも機能しますが、背景画像は非常に複雑なので、背景色の代わりに画像を使用する必要があります。これが問題の根本的な原因です。

button基本的に、私はdivにフックして、フォームを送信するためのクリックを行うための簡単なスクリプトを作成しました。

于 2012-04-15T23:47:08.690 に答える