input[type='radio'] のスタイルをカスタマイズする

フォームの場合、input[type="radio"] のスタイルは常にそれほどフレンドリーではなく、ブラウザーによって動作が異なります。

それらの違いを最大限に示し、見栄えを良くするために、いくつかのスタイルが最初に定義されます:

リーリー

リーリー

次に、各ブラウザでそれを観察すると、大きな違いがあることがわかります:

つまり:

---

エッジ:

---

オペラ:

---

クロム:

---

Firefox:

---

Firefox ブラウザの場合、幅と高さを設定しても、input[type="radio"] の円は初期状態のままです。他のブラウザのパフォーマンスにも一貫性がありません。一貫した結果を得るには、互換性処理を行う必要があります。

アイデア:

1. input[type="radio"] を非表示にし、opacity: 0 を上に置きます。これをクリックすると、元のイベントに正しく応答できます。

2. 円をカスタマイズし、元の同様のスタイルをシミュレートするために下のレイヤーに配置します。

3. input[type="radio"] が選択されている場合、js を使用してその下のカスタム要素の元の背景色を変更します。

コード:

リーリー

リーリー

リーリー

このように処理した後、ブラウザでの表示効果はすべて同じになります:

---

拡張機能:

1. コードに表示される位置は、親要素には location: 0; left: 0; を使用します。要素は、親要素に対して中央に表示されます（水平方向のセンタリングと垂直方向のセンタリングを満たします）。垂直方向の中央に配置するだけの場合は、right: 0 と left: 0 のスタイルを追加する必要はありません。

2. 子要素の高さを決定するのが難しい場合は、親要素の位置: 相対位置、子要素の位置: 10px、下位: 10px のように設定できます。 ; margin: auto; このように、子要素の高さは親要素の高さから 20 ピクセルを引いたものになり、よりスケーラブルになります。

最適化アップデート:

要件:

1. インラインラジオ選択スタイルが必要な場合があります。 2. 選択したボタンの内側の小さな円が外側の円全体を占める必要はありません。

感想:

1. 選択した各 div を左にフローティングします。

2. 親要素に円形の外枠を追加し、子要素に親要素のサイズより少し小さい背景を設定します。

コード:

リーリー

リーリー

リーリー

効果は次のように表示されます: