HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

チェックボックス:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <スタイル タイプ= "text/css" >   
  2. 入力[ type = "チェックボックス" ]
  3. {
  4. 表示: なし;
  5. }
  6.   
  7. 入力[ type = "チェックボックス" ] + ラベル
  8. {
  9. 表示: インラインブロック;
  10. 位置: 相対的;
  11. 境界線: 実線 2px #99a1a7;
  12. 幅: 35px;
  13. 高さ: 35px;
  14. 行の高さ: 35px;
  15. 境界線の半径: 4px;
  16. }
  17.   
  18. input[ type = "チェックボックス" ]:checked + label:after
  19. {
  20. コンテンツ: '\2714';
  21. フォントサイズ: 25px;
  22. 色: #99a1a7;
  23. 幅: 35px;
  24. 高さ: 35px;
  25. 行の高さ: 35px;
  26. 位置: 絶対;
  27. テキスト配置: 中央;
  28. 背景色: #e9ecee;
  29. }
  30.   
  31. 。タブ
  32. {
  33. 上マージン: 20px;
  34. 下マージン: 20px;
  35. 幅: 100%;
  36. }
  37.   
  38. .タブtd
  39. {
  40. 境界線: 実線 1px #f99;
  41. フォントサイズ: 25px;
  42. 行の高さ: 39px;
  43. }
  44. </スタイル>   
  45.   
  46. <表 クラス= "タブ"  セルパディング= "0"  セル間隔= "0"  スタイル= "border-collapse: collapse;" >   
  47.      < tr >   
  48.          < td >   
  49.              < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  50.                  <入力  id = "ck101"  タイプ= "チェックボックス"   />   
  51.                  <ラベル の場合= "ck101" > </ラベル>   
  52.              </div>​​   
  53.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  54. テスト101
  55.              </div>​​   
  56.              < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  57.                  <入力  id = "ck102"  タイプ= "チェックボックス"   />   
  58.                  <ラベル  = " ck102 " > </ラベル>   
  59.              </div>​​   
  60.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  61. テスト102
  62.              </div>​​   
  63. テスト
  64.          </ td >   
  65.          < td > </ td >   
  66.      </tr>​​   
  67.      < tr >   
  68.          < td  スタイル= "テキスト配置: 中央;" >   
  69.              < div  スタイル= "display: inline-block;" >   
  70.                  < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  71.                      <入力  id = "ck103"  タイプ= "チェックボックス"   />   
  72.                      <ラベル  = " ck103 " > </ラベル>   
  73.                  </div>​​   
  74.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  75. テスト103
  76.                  </div>​​   
  77.                  < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  78.                      <入力  id = "ck104"  タイプ= "チェックボックス"   />   
  79.                      <ラベル の場合= "ck104" > </ラベル>   
  80.                  </div>​​   
  81.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  82. テスト104
  83.                  </div>​​   
  84. テスト
  85.              </div>​​   
  86.          </ td >   
  87.          < td >テスト
  88.          </ td >   
  89.      </tr>​​   
  90. </表>   
  91.   
  92. < div  スタイル= "境界線: 実線 1px #f99; 高さ: 39px; 上余白: 20px; 下余白: 20px;" >   
  93.      < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  94.          <入力  id = "ck201"  タイプ= "チェックボックス"   />   
  95.          <ラベル  = " ck201 " > </ラベル>   
  96.      </div>​​   
  97.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  98. テスト201
  99.      </div>​​   
  100.      < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  101.          <入力  id = "ck202"  タイプ= "チェックボックス"   />   
  102.          <ラベル の場合= "ck202" > </ラベル>   
  103.      </div>​​   
  104.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;" >   
  105. テスト202
  106.      </div>​​   
  107. </div>​​   

無線：

XML/HTML コードコンテンツをクリップボードにコピー
  1. <スタイル タイプ= "text/css" >   
  2. 入力[タイプ= "ラジオ" ]
  3. {
  4. 表示: なし;
  5. }
  6.   
  7. 入力[ type = "radio" ] + ラベル
  8. {
  9. 表示: インラインブロック;
  10. 位置: 相対的;
  11. 境界線: 実線 2px #99a1a7;
  12. 幅: 25px;
  13. 高さ: 25px;
  14. 行の高さ: 25px;
  15. パディング: 5px;
  16. 境界線の半径: 19.5px;
  17. }
  18.   
  19. 入力[ type = "radio" ]:チェック済み + ラベル:後
  20. {
  21. コンテンツ： ' ';
  22. フォントサイズ: 25px;
  23. 色: #99a1a7;
  24. 幅: 25px;
  25. 高さ: 25px;
  26. 行の高さ: 25px;
  27. 位置: 絶対;
  28. テキスト配置: 中央;
  29. 背景色: #99a1a7;
  30. 境界線の半径: 12.5px;
  31. }
  32.   
  33. 入力[ type = "radio" ]:チェック済み + ラベル
  34. {
  35. 背景色: #e9ecee;
  36. }
  37.   
  38. 。タブ
  39. {
  40. 上マージン: 20px;
  41. 下マージン: 20px;
  42. 幅: 100%;
  43. }
  44.   
  45. .タブtd
  46. {
  47. 境界線: 実線 1px #f99;
  48. フォントサイズ: 25px;
  49. 行の高さ: 39px;
  50. }
  51. </スタイル>   
  52.   
  53. <表 クラス= "タブ"  セルパディング= "0"  セル間隔= "0"  スタイル= "border-collapse: collapse;" >   
  54.      < tr >   
  55.          < td >   
  56.              < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  57.                  <入力  id = "rd101"  名前= "rd"  タイプ= "ラジオ"   />   
  58.                  <ラベル  = " rd101 " > </ラベル>   
  59.              </div>​​   
  60.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  61. テスト101
  62.              </div>​​   
  63.              < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  64.                  <入力  id = "rd102"  名前= "rd"  タイプ= "ラジオ"   />   
  65.                  <ラベル  = " rd102 " > </ラベル>   
  66.              </div>​​   
  67.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  68. テスト102
  69.              </div>​​   
  70. テスト
  71.          </ td >   
  72.          < td > </ td >   
  73.      </tr>​​   
  74.      < tr >   
  75.          < td  スタイル= "テキスト配置: 中央;" >   
  76.              < div  スタイル= "display: inline-block;" >   
  77.                  < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  78.                      <入力  id = "rd103"  名前= "rd"  タイプ= "ラジオ"   />   
  79.                      <ラベル  = " rd103 " > </ラベル>   
  80.                  </div>​​   
  81.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  82. テスト103
  83.                  </div>​​   
  84.                  < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  85.                      <入力  id = "rd104"  名前= "rd"  タイプ= "ラジオ"   />   
  86.                      <ラベル  = " rd104 " > </ラベル>   
  87.                  </div>​​   
  88.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  89. テスト104
  90.                  </div>​​   
  91. テスト
  92.              </div>​​   
  93.          </ td >   
  94.          < td >テスト
  95.          </ td >   
  96.      </tr>​​   
  97. </表>   
  98.   
  99. < div  スタイル= "境界線: 実線 1px #f99; 高さ: 39px; 上余白: 20px; 下余白: 20px;" >   
  100.      < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  101.          <入力  id = "rd201"  名前= "rd"  タイプ= "ラジオ"   />   
  102.          <ラベル  = " rd201 " > </ラベル>   
  103.      </div>​​   
  104.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  105. テスト201
  106.      </div>​​   
  107.      < div   align = "中央"  スタイル= "float: left; 高さ: 39px; 幅: 39px;" >   
  108.          <入力  id = "rd202"  名前= "rd"  タイプ= "ラジオ"   />   
  109.          <ラベル  = " rd202 " > </ラベル>   
  110.      </div>​​   
  111.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;" >   
  112. テスト202
  113.      </div>​​   
  114. </div>​​   

効果画像:

私が皆さんにお伝えしたいのは、HTML チェックボックスとラジオボタンスタイルの美化に関する上記の簡単な例だけです。これが皆さんの参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

オリジナルURL: http://www.cnblogs.com/shouce/archive/2016/06/08/5569173.html

<<:  JavaScript での正規表現の使用について詳しく学ぶ

>>:  Linux での Hbase のインストールと設定のチュートリアル

推薦する

jQueryは時間セレクタを実装する

この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

Linux での Docker のインストールと展開の例

以下の記事を読んだ後、プロジェクトをサーバーにデプロイできます。Tomcat、JDK、MySQL な...

jsは徐々に増加するデジタルアニメーションを実現します

目次背景コンテナを固定し、数字を上にスクロールすることで、スクロールホイールと同様の効果を実現します...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

MySQL 8.0.20でNavicatをインストールして接続する方法と注意すべき点

注意事項1. まず、mysql インストール ディレクトリに次の内容の my.ini ファイルを作成...

Mysqlリモート接続構成を実装する2つの方法

Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...

Maxwell を使用して MySQL データをリアルタイムで同期する方法

目次マクスウェルについてMaxwellの設定と使用1. Maxwellインストールパッケージをダウン...

Linux で圧縮ファイルの内容を表示する 10 の方法 (要約)

一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...

Docker での FastAPI デプロイの詳細なプロセス

Docker 学習https://www.cnblogs.com/poloyy/p/15257059...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

MySQLインストール後のデフォルトデータベースの役割の詳細な説明

MySQL を学習すると、インストール後にいくつかのデフォルトのデータベースが付属していることに気付...

TypeScript のクラス

目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...