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

Linux kernel device driver character device driver notes

/******************** * Character device driver**...

Discussion on image path issues in css (same package/different package)

In CSS files, sometimes you need to use background...

Detailed explanation of 8 ways to pass parameters in Vue routing components

When we develop a single-page application, someti...

Nodejs module system source code analysis

Table of contents Overview CommonJS Specification...

Details of watch monitoring properties in Vue

Table of contents 1.watch monitors changes in gen...

Vue.js front-end web page pop-up asynchronous behavior example analysis

Table of contents 1. Preface 2. Find two pop-up c...

Negative margin function introduction and usage summary

As early as in the CSS2 recommendations in 1998, t...

Mysql5.7.14 installation and configuration method operation graphic tutorial (password problem solution)

This article mainly involves solutions to problem...

Detailed tutorial on installing mysql on centos 6.9

1. Confirm whether MySQL has been installed. You ...

Vue makes a simple random roll call

Table of contents Layout part: <div id="a...

How to modify the forgotten password when installing MySQL on Mac

1. Install MySQL database on mac 1. Download MySQ...

Implementation of HTTP and HTTPS services with Nginx reverse proxy for multiple domain names

Currently, Nginx has reverse proxyed two websites...

Detailed explanation of three ways to connect Docker containers to each other

There are three ways to interconnect and communic...

Detailed explanation of whether the MySQL database should use foreign key constraints

1. Introduction The topic of whether to use forei...

WeChat applet implements jigsaw puzzle game

This article shares the specific code for impleme...