ホームページ >ウェブフロントエンド >CSSチュートリアル >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; }
説明:
これらの CSS 調整により、ラジオ ボタンは機能と IE8 などの古いブラウザとの互換性を維持しながら、ボタンのような外観になります。
以上がCSS のみを使用してラジオ ボタンをボタンのように見せるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。