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

Schneller Einstieg in die Teleport-Komponenten und Verwendungssyntax von VUE 3

Inhaltsverzeichnis 1. Einführung in das Teleporti...

Detaillierte Erklärung des Plattformbusses des Linux-Treibers

Inhaltsverzeichnis 1. Einführung in den Plattform...

Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx

Wenn man online nach Methoden sucht, um Angular -...

Verschaffen Sie sich ein umfassendes Verständnis des Prototypobjekts in JavaScript

Inhaltsverzeichnis 1. Was ist ein Prototyp? 1.1 F...

Detaillierter Prozess zur Konfiguration von NIS in Centos7

Inhaltsverzeichnis Prinzip Vorbereitung der Netzw...

js, um den Effekt des Ziehens des Schiebereglers zu erzielen

In diesem Artikel finden Sie den spezifischen Cod...

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Passive Prüfung Mit passiven Integritätsprüfungen...

Ein Fehler wurde behoben, der dadurch verursacht wurde, dass die Bildlaufleiste Platz einnahm

Hintergrund Dieser Fehler wurde dadurch verursach...

Der Unterschied zwischen zwei MySQL-Anweisungen zum Löschen von Benutzern (Benutzer löschen und Benutzer löschen)

Tipp: In MySQL müssen wir häufig Benutzer erstell...

So exportieren Sie MySQL-Abfrageergebnisse in CSV

Um MySQL-Abfrageergebnisse in CSV zu exportieren,...

Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung

Neues Projekt starten Dieser Artikel zeichnet hau...

Beispielcode zum Konvertieren von HTML-Tabellendaten in das JSON-Format

Die Javascript-Funktion zum Konvertieren von <t...

Zusammenfassung der Stiländerungen des Eingabefelds vom Typ „file“

Was ist der Eingabetyp="Datei"? Ich glau...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Vue einfache Implementierung einer Plattenspielerlotterie

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