2

私はこのCSSコードを持っています：

input[type=radio] {
  opacity: 0;
  float: left;
  width: 25px;
  margin: 0;
  clear: none;
  padding: 5px 0 4px 24px;
  cursor: pointer;
  background-image: url(../images/off.png) left center no-repeat; 
}

input[type=radio]#male:checked {
  background-image: url(../images/radio-male.png) left center no-repeat; 
}

input[type=radio]#female:checked {
  background-image: url(../images/radio-female.png) left center no-repeat; 
}

そして、私が何をしても、画像を表示させることができません。Chromeの開発者ツールのネットワークタブを調べたところ、画像がブラウザに送信されていないように見えました。これは奇妙なことです。URLが正しいと確信しています。ヒントやヒントをいただければ幸いです。

4

5 に答える 5

3

background-image画像のURLのみを指定する必要があるを使用しています。同じ行にポジショニング/リピートを指定したい場合は、に変更してbackgroundください。

例えば：

background: transparent url('../images/radio-female.png') left center no-repeat;

transparent画像だけでなく色も必要な場合は変更してください。

また、ラジオ入力自体の背景のスタイルを設定することはできないようですが、ラベルのスタイルを設定してから、パディングを使用して背景を左側に配置することで、同じ効果を得ることができます。ここで私の例を参照してください：

http://jsfiddle.net/fqJg7/

于 2012-06-08T14:48:45.837 に答える
2

私はあなたがそれをする準備ができて使用することをお勧めしますjQuery Plugin。私のビジョンでは、これはそれを行うためのより良い、よりエレガントな方法になるでしょう。それはあなたにとっても簡単になります。

たとえば、http：//uniformjs.com/を使用できます。

について：ユニフォーム

「チェックボックス、ドロップダウンメニュー、ラジオボタン、ファイルアップロード入力のスタイルを設定したいと思ったことはありませんか？すべてのブラウザ間でフォーム要素のルックアンドフィールを制御したいと思ったことはありませんか？そうであれば、Uniformは新しい親友です。Uniform標準のフォームコントロールをカスタムテーマのコントロールでマスクします。実際のフォーム要素と同期して機能し、アクセシビリティと互換性を確保します。」

プラグインはたくさんあり、欲しいものを正確に手に入れることができます。

お役に立てば幸いです。

よろしく、

ジョン。

于 2012-06-08T14:52:08.637 に答える
1

これは、不透明度が0に設定されているためです。カスタムスキンラジオボタンが必要なため、不透明度を使用してネイティブコントロールを非表示にし、状態が変化したときに背景画像が変化することを期待しています。目的を達成するには、背景画像を含む画像に配置し、JavaScriptを変更にフックして背景を更新するか、ラジオボタンのイベントをクリックする必要があります。または、ネイティブコントロールを完全に非表示にして、javascriptで操作します。

このようなプラグインを使用することをお勧めします。これにより、すべてのハードワークが実行され、必要に応じてcssを変更できます：http ：//code.google.com/p/jquery-checkbox/

もう1つの注意点として、メソッドが機能した場合は、新しい画像のダウンロード中に顕著な遅延/ちらつきが発生するため、ソース画像自体を変更するのではなく、cssスプライトを使用して画像の背景位置を変更することをお勧めします。http://css-tricks.com/css-sprites/

于 2012-06-08T14:56:05.830 に答える
0

不透明度が0に設定されているためだと思います。削除すると、ラジオボタンが表示されるようです。http：//jsfiddle.net/T4eBA/3/ それでも機能しない場合は、ディレクトリ構造の詳細を教えてください。 ？あなたが現在あなたのcssをレイアウトしている方法で、私はあなたの構造が次のようになると予測します：

index.html、image、css、...など

于 2012-06-08T14:48:50.400 に答える
0

これはほとんどのブラウザでサポートされていないことは間違いありません。これをレンダリングするカスタムメソッドを作成する必要があります。チェックボックスを非表示にしてから、チェックした画像を保持する画像を追加してからチェックボックスを変更する人を見かけました。

このようなもの：http： //ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2012-06-08T14:50:12.130 に答える