1

cssプロパティをappearance使用すると、カスタム画像でラジオボタンを変更できます。これは、さまざまなバリエーションのある製品に非常に役立ちます。たとえば、ユーザーはラジオボタンではなく、バリエーションの画像をタップ/クリックできます。

ただし、 -webkit-appearance一部の画像のサイズが正しくないため、元のiPadでは（を使用している場合でも）正しく機能しません。

Firefoxでも動作しません。

それらを正しく動作させるためのjquery/javascriptプラグインがあるかどうか疑問に思いました。

ラジオボタンと画像を交換できるunifrom.jsとRyanFaitのスクリプトがあることは知っていますが、これらにはスパンの作成が含まれ、。ほどエレガントではありませんappearance。

外観を機能させるためのハックについて読んだことがありますが、それらを実装する方法に関するリンクが見つかりません。

うまくいけば、外観を適切に機能させるための何かがあります（古いブラウザにHTML5タグを認識させるスクリプトがあるのと同じように）。

PS。私のサイトではJavascriptが機能する必要があるため、JSがオフになっているユーザーについては心配していません。タブレット専用バージョンでもあるので、IEユーザーのことはあまり気になりません。

4

1 に答える 1

1

国境を越えてラジオボタンを確実にスタイリングする良い方法はありません。ただし、javascriptを使用しない非常に単純なソリューションがあります。

body {
  padding: 50px;
}

input[type=radio] {
  opacity: 0;
  position: absolute;
  margin-top: 2px;
}

label {
  padding-left: 48px;
  margin-right: 20px;
  font: normal 38px/130% sans-serif;
  background: transparent url(http://www.screwdefaultbuttons.com/images/radio.jpg) 0 0 no-repeat;
}

input[type=radio]:checked + label {
  background-position: 0 -43px;
}

ラベルをクリックすると、対応する入力ラジオがチェックされます。これにより、ラベルの背景画像が変更されるため、JavaScriptを使用せずに画像を使用してラジオボタンをカスタマイズできます。

ここでデモを見ることができます：http：//jsfiddle.net/wa2Gz/

于 2012-10-14T14:28:55.663 に答える