CSS のみを使用してラジオ ボタンをボタンのように見せるにはどうすればよいですか?

ラジオ ボタンをボタンのように見せる

ラジオ ボタンを寄付フォームに組み込むのは一般的ですが、多くの人はラジオ ボタンの代わりにボタンのような外観を好みます。伝統的なサークルダイヤル。これを実現するには、追加の HTML ライブラリや JavaScript ライブラリを必要とせずに、CSS を効果的に利用できます。

ステップ 1: HTML 構造

元の HTML 構造を維持します。ラジオボタン。例:

<li><input type="radio">

ステップ 2: CSS スタイル

CSS を使用して、外観:

/* Reset styles */
.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 label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide the radio button visually */
.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

/* Highlight the button when checked */
.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

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

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

説明:

• スタイルをリセットすると、ブラウザのデフォルトのスタイルが削除されます。
• 絶対配置を使用して要素を再配置すると、ラジオ ボタンがlabel.
• ラジオ ボタンを非表示にすると、視覚的に見えなくなります。
• チェックされた状態を検出すると、関連付けられたラベルの背景色が変わります。
• 視覚的な強化 により、パディング、境界線、ホバーなどのボタンの外観が与えられます。

これらの CSS 調整により、ラジオ ボタンは機能と IE8 などの古いブラウザとの互換性を維持しながら、ボタンのような外観になります。

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