ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS のみを使用してラジオ ボタンをボタンのようにスタイル設定するにはどうすればよいですか?
ラジオ ボタンをボタンのような要素で置き換える
ラジオ ボタンは、ユーザーが選択するフォームでよく使用されます。ただし、通常のボタンを模倣するように外観をカスタマイズすると、ユーザー インターフェイスを強化できます。
CSS を使用してラジオ ボタンを変換する
この変換は CSS だけで実現でき、ラジオ ボタンを省略できます。外部フレームワークの必要性。更新された HTML 構造は変更されず、機能も維持されます。
HTML マークアップ
寄付フォームの HTML は同じままで、次の構成になっています。
CSS スタイリング
次の 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 label, .donate-now input { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .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; }
その様子Works
以上がCSS のみを使用してラジオ ボタンをボタンのようにスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。