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

推薦する

VueはWebSocketを使用してチャット機能をシミュレートします

この効果は、2つのブラウザが互いにシミュレートしていることを示しています 1. シミュレートされたノ...

MySql クイック挿入数千万の大規模データの例

データ分析の分野では、データベースは私たちの強力な助けとなります。クエリ時間を受け入れるだけでなく、...

Alibaba Cloud で静的ウェブサイトを素早く構築する方法

序文：ジュニアプログラマーとして、私は自分自身の個人ウェブサイトを構築し、それを他の人に見せることを...

CSSをインポートする方法は何ですか？linkと@importの違いは何ですか？選択方法

Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用していま...

docker runとstartの違い

docker における実行と開始の違いDocker run はミラーイメージを指定します。そしてdo...

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

Linux の grep コマンドと egrep コマンドの詳細な説明

反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介

前提条件: Dockerはすでにインストールされています1. 画像を見つける（方法は2つあります） ...

MySQL カウントを向上させる方法のまとめ

多くのプログラマーは MySQL に精通していると思います。多くの人が count の使い方と、最適...

Dockerはrabbitmqのサンプルコードをインストールして実行します

イメージをプルします: [mall@VM_0_7_centos ~]$ sudo docker pu...

Centos システムの指定された場所に Nginx をインストールする方法

Centos システムの指定された場所に Nginx をインストールするにはどうすればいいですか?は...

インデックスは MySQL クエリ条件で使用されますか?

雇用主から MySQL クエリ条件でインデックスが使用されるかどうかを尋ねられた場合、どのように答え...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...