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

Vue2 implements provide inject to deliver responsiveness

1. Conventional writing in vue2 // The parent com...

Vue virtual Dom to real Dom conversion

There is another tree structure Javascript object...

The difference between MySQL count(1), count(*), and count(field)

Table of contents 1. First look at COUNT 2. The d...

Solution for adding iptables firewall policy to MySQL service

If your MySQL database is installed on a centos7 ...

How to use jconsole to monitor remote Tomcat services

What is JConsole JConsole was introduced in Java ...

How to change the root password in MySQL 5.7

Starting from MySQL 5.7, many security updates ha...

How to implement simple data monitoring with JS

Table of contents Overview first step Step 2 Why ...

5 Tips for Protecting Your MySQL Data Warehouse

Aggregating data from various sources allows the ...

Nginx Service Quick Start Tutorial

Table of contents 1. Introduction to Nginx 1. Wha...

How to detect Ubuntu version using command line

Method 1: Use the lsb_release utility The lsb_rel...

How to configure nginx+php+mysql in docker

First, understand a method: Entering a Docker con...

MySQL 5.7.18 zip version installation tutorial

The mysql 5.7.18 zip version of MySQL is not like...

Introduction to version management tool Rational ClearCase

Rational ClearCase is a software configuration ma...

MySQL insert json problem

MySQL 5.7.8 and later began to support a native J...

A brief discussion on Nginx10m+ high concurrency kernel optimization

What is high concurrency? The default Linux kerne...