CSSはラジオをクリックして2つの画像スタイルを切り替えますが、複数のラジオのうち1つだけをチェックできます。

クリックされたボタンには赤い画像スタイルを実装し、選択されていない他のボタンには灰色の画像スタイルを実装します。次の画像スタイルを参照してください。

1. まず、ここで 2 つのラジオを作成します。(さらに宣言することもできます。ここでのデータは通常、動的に取得されます)

<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />
<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />

2. ラジオにスタイルを追加する: CSS コード:

.address_manager_content-d3-left-img{
 /* 元のスタイルを非表示にする */
 外観: なし;
 -webkit-appearance: なし;
 アウトライン: なし;
 /* 新しいスタイルを追加: 選択されていない場合*/
 表示: インラインブロック;
 幅: 20px;
 高さ: 20px;
 位置: 静的;
 マージン: 15px 5px 0 0!重要;
 背景: url(/public/app/gzh/images/address_manager_wxz.png) 繰り返しなし;
 背景サイズ: カバー;
}
.address_manager_content-d3-left-img:checked{/* 選択されている場合*/
   背景: url(/public/app/gzh/images/address_manager_xz.png) 繰り返しなし;
   背景サイズ: カバー;
}

3. 説明: (いくつかのキースタイルがあり、他のスタイルは自分で調整できます)

1) 元のスタイルを非表示にする 2) url 属性を使用して元のスタイルを画像に置き換える 3) 概要!重要な使い方：私のこの記事では、4) background-size: cover 属性について説明しています。背景画像を要素コンテナに収まるサイズに拡大します。画像の比率は変わりませんが、コンテナを越える部分は切り取られる場合があることに注意してください。 (background-size: 100% 100% と同様) 5) 要素を選択: 選択したスタイルを設定するにはチェックします。

4. 上記の手順を完了したら、ラジオボタンをクリックして画像スタイルを切り替えることができます。これはアドレス管理の一部です。Vue.js を使用してアドレス管理を実装するには、[戻る] をクリックします。

要約する

上記は私が紹介したCSSです。ラジオをクリックすると、2つの画像スタイルが切り替わります。複数のラジオのうち1つだけをチェックできます。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!