Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios

Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios

Einfaches Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios

Kontrollkästchen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Stil   Typ = "Text/CSS" >   
  2. Eingabe [ Typ = "Kontrollkästchen" ]
  3. {
  4. Anzeige: keine;
  5. }
  6.   
  7. Eingabe [ Typ = "Kontrollkästchen" ] + Bezeichnung
  8. {
  9. Anzeige: Inline-Block;
  10. Position: relativ;
  11. Rand: durchgezogen 2px #99a1a7;
  12. Breite: 35px;
  13. Höhe: 35px;
  14. Zeilenhöhe: 35px;
  15. Rahmenradius: 4px;
  16. }
  17.   
  18. Eingabe [ Typ = "Kontrollkästchen" ]: aktiviert + Bezeichnung: nach
  19. {
  20. Inhalt: '\2714';
  21. Schriftgröße: 25px;
  22. Farbe: #99a1a7;
  23. Breite: 35px;
  24. Höhe: 35px;
  25. Zeilenhöhe: 35px;
  26. Position: absolut;
  27. Textausrichtung: zentriert;
  28. Hintergrundfarbe: #e9ecee;
  29. }
  30.   
  31. .Tab
  32. {
  33. Rand oben: 20px;
  34. Rand unten: 20px;
  35. Breite: 100 %;
  36. }
  37.   
  38. .tab td
  39. {
  40. Rand: durchgezogen 1px #f99;
  41. Schriftgröße: 25px;
  42. Zeilenhöhe: 39px;
  43. }
  44. </ Stil >   
  45.   
  46. < Tabelle   Klasse = "Tabulator"   Zellenpadding = "0"   Zellenabstand = "0"   Stil = "Rahmen-Collapse: Collapse;" >   
  47.      < tr >   
  48.          < td >   
  49.              < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  50.                  < Eingabe   Ich würde sagen, "ck101"   Typ = "Kontrollkästchen"   />   
  51.                  < Bezeichnung   für = "ck101" > </ label >   
  52.              </div>​​   
  53.              < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  54. Testen 101
  55.              </div>​​   
  56.              < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  57.                  < Eingabe   Ich würde sagen "ck102"   Typ = "Kontrollkästchen"   />   
  58.                  < Bezeichnung   für = "ck102" > </ label >   
  59.              </div>​​   
  60.              < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  61. Prüfung 102
  62.              </div>​​   
  63. prüfen
  64.          </ td >   
  65.          < td > </ td >   
  66.      </tr>​​   
  67.      < tr >   
  68.          < td   Stil = "Textausrichtung: zentriert;" >   
  69.              < div   Stil = "Anzeige: Inline-Block;" >   
  70.                  < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  71.                      < Eingabe   Ich würde sagen "ck103"   Typ = "Kontrollkästchen"   />   
  72.                      < Bezeichnung   für = "ck103" > </ label >   
  73.                  </div>​​   
  74.                  < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  75. Prüfung 103
  76.                  </div>​​   
  77.                  < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  78.                      < Eingabe   Ich würde sagen "ck104"   Typ = "Kontrollkästchen"   />   
  79.                      < Bezeichnung   für = "ck104" > </ label >   
  80.                  </div>​​   
  81.                  < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  82. Prüfung 104
  83.                  </div>​​   
  84. prüfen
  85.              </div>​​   
  86.          </ td >   
  87.          < td > Prüfung
  88.          </ td >   
  89.      </tr>​​   
  90. </ Tabelle >   
  91.   
  92. < div   Stil = "Rahmen: durchgehend 1px #f99; Höhe: 39px; Rand oben: 20px; Rand unten: 20px;" >   
  93.      < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  94.          < Eingabe   Ich würde sagen "ck201"   Typ = "Kontrollkästchen"   />   
  95.          < Bezeichnung   für = "ck201" > </ label >   
  96.      </div>​​   
  97.      < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  98. Prüfung 201
  99.      </div>​​   
  100.      < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  101.          < Eingabe   Ich würde sagen "ck202"   Typ = "Kontrollkästchen"   />   
  102.          < Bezeichnung   für = "ck202" > </ label >   
  103.      </div>​​   
  104.      < div   Stil = "float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px;" >   
  105. Prüfung 202
  106.      </div>​​   
  107. </div>​​   

Radio:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Stil   Typ = "Text/CSS" >   
  2. Eingabe [ Typ = "Radio" ]
  3. {
  4. Anzeige: keine;
  5. }
  6.   
  7. Eingabe [ Typ = "Radio" ] + Bezeichnung
  8. {
  9. Anzeige: Inline-Block;
  10. Position: relativ;
  11. Rand: durchgezogen 2px #99a1a7;
  12. Breite: 25px;
  13. Höhe: 25px;
  14. Zeilenhöhe: 25px;
  15. Polsterung: 5px;
  16. Rahmenradius: 19,5px;
  17. }
  18.   
  19. Eingabe [ Typ = "Radio" ]: aktiviert + Label: nach
  20. {
  21. Inhalt: ' ';
  22. Schriftgröße: 25px;
  23. Farbe: #99a1a7;
  24. Breite: 25px;
  25. Höhe: 25px;
  26. Zeilenhöhe: 25px;
  27. Position: absolut;
  28. Textausrichtung: zentriert;
  29. Hintergrundfarbe: #99a1a7;
  30. Rahmenradius: 12,5px;
  31. }
  32.   
  33. Eingabe [ Typ = "Radio" ]: aktiviert + Label
  34. {
  35. Hintergrundfarbe: #e9ecee;
  36. }
  37.   
  38. .Tab
  39. {
  40. Rand oben: 20px;
  41. Rand unten: 20px;
  42. Breite: 100 %;
  43. }
  44.   
  45. .tab td
  46. {
  47. Rand: durchgezogen 1px #f99;
  48. Schriftgröße: 25px;
  49. Zeilenhöhe: 39px;
  50. }
  51. </ Stil >   
  52.   
  53. < Tabelle   Klasse = "Tabulator"   Zellenpadding = "0"   Zellenabstand = "0"   Stil = "Rahmen-Collapse: Collapse;" >   
  54.      < tr >   
  55.          < td >   
  56.              < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  57.                  < Eingabe   Ich würde sagen "rd101"   Name = "rd"   Typ = "Radio"   />   
  58.                  < Bezeichnung   für = "rd101" > </ label >   
  59.              </div>​​   
  60.              < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  61. Testen 101
  62.              </div>​​   
  63.              < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  64.                  < Eingabe   Ich würde sagen "rd102"   Name = "rd"   Typ = "Radio"   />   
  65.                  < Bezeichnung   für = "rd102" > </ label >   
  66.              </div>​​   
  67.              < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  68. Prüfung 102
  69.              </div>​​   
  70. prüfen
  71.          </ td >   
  72.          < td > </ td >   
  73.      </tr>​​   
  74.      < tr >   
  75.          < td   Stil = "Textausrichtung: zentriert;" >   
  76.              < div   Stil = "Anzeige: Inline-Block;" >   
  77.                  < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  78.                      < Eingabe   Ich würde sagen "rd103"   Name = "rd"   Typ = "Radio"   />   
  79.                      < Bezeichnung   für = "rd103" > </ label >   
  80.                  </div>​​   
  81.                  < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  82. Prüfung 103
  83.                  </div>​​   
  84.                  < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  85.                      < Eingabe   Ich würde sagen "rd104"   Name = "rd"   Typ = "Radio"   />   
  86.                      < Bezeichnung   für = "rd104" > </ label >   
  87.                  </div>​​   
  88.                  < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  89. Prüfung 104
  90.                  </div>​​   
  91. prüfen
  92.              </div>​​   
  93.          </ td >   
  94.          < td > Prüfung
  95.          </ td >   
  96.      </tr>​​   
  97. </ Tabelle >   
  98.   
  99. < div   Stil = "Rahmen: durchgehend 1px #f99; Höhe: 39px; Rand oben: 20px; Rand unten: 20px;" >   
  100.      < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  101.          < Eingabe   Ich würde sagen "rd201"   Name = "rd"   Typ = "Radio"   />   
  102.          < Bezeichnung   für = "rd201" > </ label >   
  103.      </div>​​   
  104.      < div   Stil = "Float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px; Rand rechts: 20px;" >   
  105. Prüfung 201
  106.      </div>​​   
  107.      < div   ausrichten = "zentriert"   Stil = "float: links; Höhe: 39px; Breite: 39px;" >   
  108.          < Eingabe   Ich würde sagen "rd202"   Name = "rd"   Typ = "Radio"   />   
  109.          < Bezeichnung   für = "rd202" > </ label >   
  110.      </div>​​   
  111.      < div   Stil = "float: links; Höhe: 39px; Zeilenhöhe: 39px; Schriftgröße: 25px; Rand links: 10px;" >   
  112. Prüfung 202
  113.      </div>​​   
  114. </div>​​   

Effektbild:

Das obige einfache Beispiel für die Verschönerung von HTML-Kontrollkästchen und -Radios ist alles, was ich mit Ihnen teilen möchte. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

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

<<:  Erfahren Sie mehr über die Verwendung regulärer Ausdrücke in JavaScript

>>:  Eine kurze Erläuterung, wann MySQL interne temporäre Tabellen verwendet

Artikel empfehlen

Das Fehlschlagen der Wiedergabe von FLV-/MP4- und anderen Videodateien auf der Website hängt mit dem MIME-Typ zusammen.

Beim Erstellen einer Website habe ich festgestellt...

Einführung in Linux-Komprimierungs- und Dekomprimierungsbefehle

Inhaltsverzeichnis Gängige Komprimierungsformate:...

Vue3.x verwendet mitt.js für die Komponentenkommunikation

Inhaltsverzeichnis Schnellstart Anwendung Grundpr...

Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts

Offizielle Docker-Dokumentation: https://docs.doc...

Die neueste Installations- und Konfigurationsmethode für MySQL-5.7.21

1. Entpacken Sie das heruntergeladene MySQL-Kompr...

So verwenden Sie Webpack und Rollup zum Verpacken von Komponentenbibliotheken

Vorwort Ich habe zuvor eine Komponente im Ladesti...

Vue + Spring Boot realisiert die Bestätigungscodefunktion

In diesem Artikelbeispiel wird der spezifische Co...

Mehrere Methoden zum Ausführen von SQL-Dateien unter der MySQL-Befehlszeile

Inhaltsverzeichnis Die erste Methode: Wenn die My...

Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren

1. Hintergrund Bei unserer täglichen Website-Wart...

Detaillierte Erläuterung der MySQL Innodb-Speicherstruktur und der Speicherung von Nullwerten

Hintergrund: Tablespace: Alle INNODB-Daten werden...

Beispiele für die Verwendung von HTML-Listen-Tags dl, ul, ol

Code kopieren Der Code lautet wie folgt: <!-- ...

Detaillierte Erklärung der KeepAlive-Anwendungsfälle in Vue

Bei der Entwicklung ist es häufig erforderlich, d...

MySQL-Installations- und Konfigurationsmethoden und Vorsichtsmaßnahmen unter der Windows-Plattform

2.1, MSI-Installationspaket 2.1.1、Installation Be...

HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Inhaltsverzeichnis Implementieren von HTML CSS hi...

Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen

Als eines der beliebtesten Front-End-Frameworks i...