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

Installieren Sie Kafka unter Linux

Inhaltsverzeichnis 1.1 Java-Umgebung als Vorausse...

Der Tabellenkörper in HTML kann nach oben und unten sowie nach links und rechts verschoben werden.

Wenn der Tabellenkopf fixiert ist, muss er in zwe...

Detaillierte Erklärung der Lösung zur Schriftunschärfe bei Verwendung von Transform in CSS3

Diese Frage ist sehr seltsam, deshalb gehe ich di...

Zusammenfassung der allgemeinen Quellkonfiguration von Spiegelbildern für Linux-Distributionen

Ich habe mich kürzlich mit Linux beschäftigt und ...

So verwenden Sie die Baidu Map API im Vue-Projekt

Inhaltsverzeichnis 1. Registrieren Sie ein Konto ...

So konfigurieren Sie Tomcat und führen Ihr erstes Java-Webprojekt auf IntelliJ IDEA 2018 aus

1 Tomcat herunterladen und starten Gehen Sie auf ...

Die Popularität chinesischer Domainnamen in China hat eine neue Höhepunktrunde eingeleitet

<br />Seit das Außenministerium und andere z...

Lösen Sie das Problem, dass await in forEach nicht funktioniert

1. Einleitung Vor ein paar Tagen bin ich bei der ...

Detaillierte Schritte zur Installation und Verwendung von VMware ESXi 6.5

Inhaltsverzeichnis Einführung Architektur Vorteil...

Zwei Methoden zur Implementierung der MySQL-Gruppenzählung und Bereichsaggregation

Der erste: Normalbetrieb WÄHLEN SUM(ddd) AS Anzah...

Mehrere Möglichkeiten zur Implementierung der Vererbung in JavaScript

Inhaltsverzeichnis Strukturelle Vererbung (implem...

CSS realisiert den Maskeneffekt, wenn die Maus über das Bild bewegt wird

1. Setzen Sie den HTML-Code der Maskenebene und d...

Vorteile von INSERT INTO SET in MySQL

Daten in MySQL-Datenbank einfügen. Bisher häufig ...

So verwenden Sie React-Slots

Inhaltsverzeichnis brauchen Kernidee Zwei Möglich...

Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox

Die Netzwerkkonfiguration des Host Only+NAT-Modus...