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 のインストールと設定のチュートリアル

推薦する

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法

1. 目標: mysql の character_set_server の値を latin1 から ...

Win7 インストール MySQL 5.6 チュートリアル図

目次1. ダウンロード2. インストール3. my.ini ファイルを設定する（デフォルトのエンコー...

MySQLクエリ条件の一般的な使用法の詳細な説明

この記事では、例を使用して、MySQL クエリ条件の一般的な使用方法を説明します。ご参考までに、詳細...

JavaScript でプロトタイプ パターンを実装する方法

概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...

React antdはフォームの動的な増減を実現します

以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...

MySQL: MySQL 関数

1. 組み込み関数1. 数学関数ランド()丸め(数値) ceil(数値)階数(数値)ランダム丸め切り...

Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド（１）コピー操作（２）貼り付け操作（...

MySQL ステートメントコメントの紹介

MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...

CSS3 ベジェ曲線の例: リンクホバーアニメーション効果の作成

CSS3 アニメーション トランジションを使用して、リンクの上にマウスを移動すると小さなポップアップ...

さまざまなSQL結合を簡単に学ぶ

SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...