Inline Checkboxes
CODE
×
HTML
<div class='checkboxes'> <span class='notice'><strong>Überschreibender Hinweistext</strong></span> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <label class='checkbox-inline'><input type="checkbox" /><span class="checked"></span><span class="checkbox"></span>Checkbox</label> <span class='notice'>Das ist hier ein weiterer optionaler Hinweistext, welcher unterhalb desr Form-Elementes steht! Dieser kann länger ausfallen und ist nicht «fett» gesetzt.</span> </div>
CSS
label.checkbox-inline { position:relative; display:inline-block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; margin-top: 10px; margin-right: 37px; margin-bottom: 20px; padding-left: 35px; } span.notice { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; color: var(--black); background-color: var(--white); margin-top: 10px; margin-bottom: 16px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
JS
Inline Checkboxes
×
Überschreibender Hinweistext
Checkbox
Checkbox
Checkbox
Das ist hier ein weiterer optionaler Hinweistext, welcher unterhalb desr Form-Elementes steht! Dieser kann länger ausfallen und ist nicht «fett» gesetzt.