Simple example of HTML checkbox and radio style beautification

Simple example of HTML checkbox and radio style beautification

Simple example of HTML checkbox and radio style beautification

checkbox:

XML/HTML CodeCopy content to clipboard
  1. < style   type = "text/css" >   
  2. input[ type = "checkbox" ]
  3. {
  4. display: none;
  5. }
  6.   
  7. input[ type = "checkbox" ] + label
  8. {
  9. display: inline-block;
  10. position: relative;
  11. border: solid 2px #99a1a7;
  12. width: 35px;
  13. height: 35px;
  14. line-height: 35px;
  15. border-radius: 4px;
  16. }
  17.   
  18. input[ type = "checkbox" ]:checked + label:after
  19. {
  20. content: '\2714';
  21. font-size: 25px;
  22. color: #99a1a7;
  23. width: 35px;
  24. height: 35px;
  25. line-height: 35px;
  26. position: absolute;
  27. text-align: center;
  28. background-color: #e9ecee;
  29. }
  30.   
  31. .tab
  32. {
  33. margin-top: 20px;
  34. margin-bottom: 20px;
  35. width: 100%;
  36. }
  37.   
  38. .tab td
  39. {
  40. border: solid 1px #f99;
  41. font-size: 25px;
  42. line-height: 39px;
  43. }
  44. </ style >   
  45.   
  46. < table   class = "tab"   cellpadding = "0"   cellspacing = "0"   style = "border-collapse: collapse;" >   
  47.      < tr >   
  48.          < td >   
  49.              < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  50.                  < input   id = "ck101"   type = "checkbox"   />   
  51.                  < label   for = "ck101" > </ label >   
  52.              </ div >   
  53.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  54. Testing 101
  55.              </ div >   
  56.              < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  57.                  < input   id = "ck102"   type = "checkbox"   />   
  58.                  < label   for = "ck102" > </ label >   
  59.              </ div >   
  60.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  61. Test 102
  62.              </ div >   
  63. test
  64.          </ td >   
  65.          < td > </ td >   
  66.      </ tr >   
  67.      < tr >   
  68.          < td   style = "text-align: center;" >   
  69.              < div   style = "display: inline-block;" >   
  70.                  < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  71.                      < input   id = "ck103"   type = "checkbox"   />   
  72.                      < label   for = "ck103" > </ label >   
  73.                  </ div >   
  74.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  75. Test 103
  76.                  </ div >   
  77.                  < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  78.                      < input   id = "ck104"   type = "checkbox"   />   
  79.                      < label   for = "ck104" > </ label >   
  80.                  </ div >   
  81.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  82. Test 104
  83.                  </ div >   
  84. test
  85.              </ div >   
  86.          </ td >   
  87.          < td > Test
  88.          </ td >   
  89.      </ tr >   
  90. </ table >   
  91.   
  92. < div   style = "border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;" >   
  93.      < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  94.          < input   id = "ck201"   type = "checkbox"   />   
  95.          < label   for = "ck201" > </ label >   
  96.      </ div >   
  97.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  98. Test 201
  99.      </ div >   
  100.      < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  101.          < input   id = "ck202"   type = "checkbox"   />   
  102.          < label   for = "ck202" > </ label >   
  103.      </ div >   
  104.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;" >   
  105. Test 202
  106.      </ div >   
  107. </ div >   

radio:

XML/HTML CodeCopy content to clipboard
  1. < style   type = "text/css" >   
  2. input[ type = "radio" ]
  3. {
  4. display: none;
  5. }
  6.   
  7. input[ type = "radio" ] + label
  8. {
  9. display: inline-block;
  10. position: relative;
  11. border: solid 2px #99a1a7;
  12. width: 25px;
  13. height: 25px;
  14. line-height: 25px;
  15. padding: 5px;
  16. border-radius: 19.5px;
  17. }
  18.   
  19. input[ type = "radio" ]:checked + label:after
  20. {
  21. content: ' ';
  22. font-size: 25px;
  23. color: #99a1a7;
  24. width: 25px;
  25. height: 25px;
  26. line-height: 25px;
  27. position: absolute;
  28. text-align: center;
  29. background-color: #99a1a7;
  30. border-radius: 12.5px;
  31. }
  32.   
  33. input[ type = "radio" ]:checked + label
  34. {
  35. background-color: #e9ecee;
  36. }
  37.   
  38. .tab
  39. {
  40. margin-top: 20px;
  41. margin-bottom: 20px;
  42. width: 100%;
  43. }
  44.   
  45. .tab td
  46. {
  47. border: solid 1px #f99;
  48. font-size: 25px;
  49. line-height: 39px;
  50. }
  51. </ style >   
  52.   
  53. < table   class = "tab"   cellpadding = "0"   cellspacing = "0"   style = "border-collapse: collapse;" >   
  54.      < tr >   
  55.          < td >   
  56.              < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  57.                  < input   id = "rd101"   name = "rd"   type = "radio"   />   
  58.                  < label   for = "rd101" > </ label >   
  59.              </ div >   
  60.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  61. Testing 101
  62.              </ div >   
  63.              < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  64.                  < input   id = "rd102"   name = "rd"   type = "radio"   />   
  65.                  < label   for = "rd102" > </ label >   
  66.              </ div >   
  67.              < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  68. Test 102
  69.              </ div >   
  70. test
  71.          </ td >   
  72.          < td > </ td >   
  73.      </ tr >   
  74.      < tr >   
  75.          < td   style = "text-align: center;" >   
  76.              < div   style = "display: inline-block;" >   
  77.                  < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  78.                      < input   id = "rd103"   name = "rd"   type = "radio"   />   
  79.                      < label   for = "rd103" > </ label >   
  80.                  </ div >   
  81.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  82. Test 103
  83.                  </ div >   
  84.                  < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  85.                      < input   id = "rd104"   name = "rd"   type = "radio"   />   
  86.                      < label   for = "rd104" > </ label >   
  87.                  </ div >   
  88.                  < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  89. Test 104
  90.                  </ div >   
  91. test
  92.              </ div >   
  93.          </ td >   
  94.          < td > Test
  95.          </ td >   
  96.      </ tr >   
  97. </ table >   
  98.   
  99. < div   style = "border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;" >   
  100.      < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  101.          < input   id = "rd201"   name = "rd"   type = "radio"   />   
  102.          < label   for = "rd201" > </ label >   
  103.      </ div >   
  104.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;" >   
  105. Test 201
  106.      </ div >   
  107.      < div   align = "center"   style = "float: left; height: 39px; width: 39px;" >   
  108.          < input   id = "rd202"   name = "rd"   type = "radio"   />   
  109.          < label   for = "rd202" > </ label >   
  110.      </ div >   
  111.      < div   style = "float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;" >   
  112. Test 202
  113.      </ div >   
  114. </ div >   

Effect picture:

The above simple example of HTML checkbox and radio style beautification is all I want to share with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/shouce/archive/2016/06/08/5569173.html

<<:  Detailed explanation of the process of troubleshooting the cause of high CPU usage under Linux

>>:  Learn more about using regular expressions in JavaScript

Recommend

Solution to 2059 error when connecting Navicat to MySQL

Recently, when I was learning Django, I needed to...

Commands to find domain IP address in Linux terminal (five methods)

This tutorial explains how to verify the IP addre...

Tutorial on installing Android Studio on Ubuntu 19 and below

Based on past experience, taking notes after comp...

Cross-host communication between docker containers-overlay-based implementation method

Overlay network analysis Built-in cross-host netw...

Practice of implementing custom search bar and clearing search events in avue

Table of contents 1. Customize the search bar con...

Vue elementUI form nested table and verification of each row detailed explanation

Table of contents Effect display Code Link Key Co...

Solve the problem of Syn Flooding in MySQL database

Syn attack is the most common and most easily exp...

linux exa command (better file display experience than ls)

Install Follow the README to install The document...

Introduction and architecture of Apache Arrow, a high-performance data format library package on JVM (Gkatziouras)

Apache Arrow is a popular format used by various ...

MySQL 5.7.18 installation and configuration tutorial under Windows

This article shares the installation and configur...

Vue custom encapsulated button component

The custom encapsulation code of the vue button c...

Detailed explanation of three solutions to the website footer sinking effect

Background Many website designs generally consist...

Example of horizontal arrangement of li tags in HTMl

Most navigation bars are arranged horizontally as...

A brief analysis of CSS :is() and :where() coming to browsers soon

Preview versions of Safari (Technology Preview 10...

MySQL implements multi-table association statistics (subquery statistics) example

This article uses an example to describe how to i...