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

Schritte zum Einrichten einer HTTPS-Website basierend auf Nginx

Inhaltsverzeichnis Vorwort: Verschlüsselungsalgor...

Der Unterschied zwischen distinct und group by in MySQL

Einfach ausgedrückt wird distinct zum Entfernen v...

So ermitteln Sie die Höhe des MySQL InnoDB B+-Baums

Vorwort Der Grund, warum die InnoDB-Engine von My...

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Vor kurzem habe ich ein Projekt, bei dem ich mit i...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

Schritte zur Implementierung des cuda10.1-Treibers bei der Installation von Ubuntu

1. Laden Sie cuda10.1 herunter: Link zur offiziel...

So konfigurieren Sie Nginx's Anti-Hotlinking

Experimentelle Umgebung • Eine minimal installier...

CSS Skills Collection – Klassiker unter den Klassikern

Entfernen Sie das gepunktete Kästchen auf dem Link...

Erklärung zur Änderung des npm Taobao-Spiegels

1. Nutzung auf höchster Ebene 1. Installieren Sie...

Einführung in useRef und useState in JavaScript

Inhaltsverzeichnis 1. useState-Hook 2. useRef-Hoo...

Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript

Inhaltsverzeichnis 1. Direkte Zuordnung 2. Oberfl...

Vue+SSH-Framework zur Realisierung von Online-Chat

In diesem Artikel wird der spezifische Code des V...

Detaillierte Erläuterung des Nginx-Reverse-Generation-Beispiels für verteilten Mogilefs-Speicher

1. Einführung in verteilte Speichersysteme Die ko...

MySQL zeigt die maximale Anzahl von Verbindungen an und ändert die maximale Anzahl von Verbindungen

MySQL Maximale Anzahl von Verbindungen anzeigen u...

Beispieltest MySQL-Enumerationstyp

Bei der Entwicklung eines Projekts stößt man häuf...