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

推薦する

コード分​​析を実現するためのFastDFSとNginxの統合

FastDFSとNginxの統合:トラッカーは、負荷分散と高可用性のために Nginx と組み合わせ...

JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...

MySQL エラー: 接続数が多すぎる場合の解決策

MySQLデータベースの接続が多すぎますこのエラーは明らかに、mysql_connect の後に m...

MySQL 8.0 のインストール中に発生した 3 つの小さなエラーの概要

序文これまで当社ではMySQLの5.7シリーズを使用していましたが、バージョン8.0のリリースに合わ...

MySQLユーザー削除バグを解決する

著者が MySQL を使用してユーザーを追加していたところ、ユーザー名が間違って記述されていることに...

HiveメタデータをMySQLに設定するプロセス全体

Hiveのインストールディレクトリで、confディレクトリに入り、hive-site.xmlファイル...

Linux ディレクトリ切り替え実装コード例

ファイルの切り替えは Linux でよく行われる操作です。Linux を初めて学ぶときに最初に触れる...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

thead、tfoot、tbodyを使用して表を作成します

これらの 3 つのタグを間違った方法で使用して、タイトルを表に沿わせたり、tbody の高さを固定し...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

HTML で JavaScript を使用する

<script> タグHTML5では、スクリプトには次の属性があります: async、d...

4つの柔軟なScssコンパイル出力スタイル

多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコ...

CentOS8でルートパスワードを素早く変更する方法

Centos8仮想マシンを起動し、上下キーを押して図1のインターフェースの最初の行を選択します。図1...

aタグ疑似クラスの機能と記述順序は何ですか？

a タグ疑似クラスの役割: 「:link」: 訪問されていないタグの状態。 「:visited」: ...