原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要素も使用できます)。選択したら、画像や JS を使用せずに、input:check+label を使用してラベルを選択します。 効果プレビュー HTMLコード <div class="radio"> <input type="checkbox" id="sex1"> <label for="sex1"></label> 男 <div class="radio"> <input type="checkbox" id="sex2"> <label for="sex2"></label> 女性</div> CSSコード .ラジオ{ 位置: 相対的; 表示: インラインブロック; 右マージン: 12px; } .ラジオ入力{ 幅: 15px; 高さ: 15px; appearance: none;/*デフォルトのスタイルをクリア*/ -webkit-appearance: なし; 不透明度: 0; アウトライン: なし; z-index: 8; /*入力レベルをラベルより高くして選択できるようにします*/ } .ラジオラベル{ 位置: 絶対; 左: 0; 上: 6px; 幅: 15px; 高さ: 15px; 境界線: 1px 実線 #3582E9; } .radio 入力:チェック済み+ラベル::after { コンテンツ: ""; 位置: 絶対; 左: 4px; 上: 0px; /* ここでは長方形の半分が表示され、チェックマーク スタイルを実現するために 45 度回転されます */ 幅: 5px; 高さ: 12px; 右境界線: 1px 実線 #000000; 下境界線: 1px 実線 #000000; 変換: 回転(45度); } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: 基本的なウェブページパフォーマンス最適化ルールの簡単な概要
>>: Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法
序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
1. まず、インタラクティブに使用するための .json ファイルを作成します。json データ形式...
1. LinuxのMySQLで中国語の文字化けが発生する。以下の操作を実行する。 vi /etc/m...
Brotli は、Zopfli よりも 20 ~ 26% 高い圧縮率を実現できる新しいデータ形式です...
すべてのオーケストレーション ファイルと構成ファイルは、私の Github からアクセスできます。構...
URL: http://hostname.com/contextPath/servletPath/p...
私は長い間落ち込んでいます、なぜでしょうか?以前、お客様から、提供されたソフトウェアが正常に動作しな...
1. Tomcatをインストールする1. Docker HubでTomcatイメージを見つける d...
インストール環境: CentOS7 64ビットMINI版、MySQL5.7をインストール1. YUM...
この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
Linux システムのシャットダウン コマンドは何ですか? Liangxu Tutorial Net...
htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...