CSS のみを使用してラジオ ボタンをボタンのようにスタイル設定し、IE8 との互換性を維持するにはどうすればよいですか?

ラジオ ボタンの外観のカスタマイズ: ボタンのように見せる

問題:

目的一般的な円形のダイヤルではなく、ボタンに似たラジオ ボタンを寄付フォームに作成します。さらに、この機能は IE8 でシームレスに機能する必要があります。

解決策:

CSS を利用すると、外部フレームワークや HTML の大幅な変更に依存せずに、目的の結果を達成できます。 .

HTML構造:

HTML 構造はほとんど変更されていませんが、ラジオ ボタンにはリスト (ul) が使用されます。

CSS スタイル:

• 不透明度を使用してデフォルトのラジオボタンを非表示にします: 0.01.
• 入力要素をその上のラベルに合わせて絶対的に配置します。
• ラベルをブロック要素として設定し、ボタン領域全体をカバーするように絶対的に配置します。インタラクティブ性のためにカーソル: ポインターを使用します。
• ラジオ ボタンがチェックされている場合、CSS を使用して対応するラベルに背景色を適用し、ボタンのクリック効果を模倣します。

サンプルコード:

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}

例使用方法:

<ul class="donate-now">
  <li>
    <input type="radio">

このアプローチにより、ラジオ ボタンの外観を効果的にカスタマイズして、機能を損なうことなくボタンに似せることができます。

以上がCSS のみを使用してラジオ ボタンをボタンのようにスタイル設定し、IE8 との互換性を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。