Drucken eines Kontrollkästchens/Kontrollkästchens mit HTML und CSS

Question

Ich habe das folgende Problem: Ich muss einen HTML-> PDF-Konvertierungsdienst verwenden, um ein Stück HTML zu rendern. Allerdings ist dieser Dienst in seiner Funktionalität ein wenig eingeschränkt, daher brauche ich einen Weg, um ihn "zu umgehen".

Ich drucke hauptsächlich nur Text, es ist also keine große Sache, aber das einzige Problem ist, dass ich ein paar "nicht markierte" und einige "angekreuzte" Kontrollkästchen drucken muss. Insbesondere habe ich versucht:

• die Verwendung von Unicode ☐ („☐“) und ☑ („☑“) Zeichen, aber der Konverter sie nicht machen (wahrscheinlich die Schriftart ist es mit nicht haben sie)
• Mit den wingDing Zeichen þ und ¨ aber auch hier ist die wingding Schrift nicht
erkannt
• der Konverter keine Bilder nicht unterstützt, so kann nicht nur ein Bild verwenden

ich war th Einfärben, an diesem Punkt zu „simulieren“ eine Checkbox durch Spannweiten mit Grenzen, mit so etwas wie:

<span style="border: 1px solid black; height: 12px; width: 12px;"></span> 

Allerdings kann ich es nicht richtig aussehen lassen (keinen Fehler des Wandlers diese Zeit, auch Browser zeigen das Obige als nur eine Vertical-Linie.

Kann mir jemand helfen, Checkboxen mit "einfachen" HTML-Elementen zu "zeichnen"? Was wäre der sauberste Weg?

PS: Kontrollkästchen müssen inline mit dem Text sein.

Answer 1

Sie sind auf dem richtigen Weg.

Verwendung von HTML und CSS:

/* The standalone checkbox square*/ 
 
.checkbox { 
 
    width:20px; 
 
    height:20px; 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
} 
 

 
/* This is what simulates a checkmark icon */ 
 
.checkbox.checked:after { 
 
    content: ''; 
 
    display: block; 
 
    width: 4px; 
 
    height: 7px; 
 
    
 
    /* "Center" the checkmark */ 
 
    position:relative; 
 
    top:4px; 
 
    left:7px; 
 
    
 
    border: solid #000; 
 
    border-width: 0 2px 2px 0; 
 
    transform: rotate(45deg); 
 
}

<div class="checkbox"></div> Unchecked<br><br> 
 

 
<div class="checkbox checked"></div> Checked

Der Grund Ihr Code nicht funktioniert hat, weil Sie ein span Element verwendet wurden, die ein Inline-Element ist. Sie können hierfür verwenden Sie eine span, aber Sie müssen den Stil von display: block zu dem Element hinzufügen (so dass es als ein Blockelement anstelle eines Inline-Elements fungieren).

Das div-Tag ist ein Block, so dass kein display Stil festgelegt werden muss. Wenn Sie die div möchten inline angezeigt werden, stellen Sie die display: inline-block

Answer 2

Try this:

<div style="border: 1px solid black; 
 
    width: 10px; 
 
    height: 10px; 
 
    display: inline-block; 
 
    margin-right: 4px;"> 
 
</div>

https://jsfiddle.net/8rt4dqfc/