List Radio-Buttons
CODE
×
HTML
<div class='radiobuttons-list'> <span class='optional'>optional</span> <label class='radio-block' for="rx1"><input type="radio" id="rx1" name="r1"/><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio-block' for="rx2"><input type="radio" id="rx2" name="r1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio-block' for="rx3"><input type="radio" id="rx3" name="r1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> </div>
CSS
label.radio-block { width:100%; position:relative; display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; line-height: 125%; margin-top: 30px; margin-bottom: 30px; padding-left: 37px; } span.optional { position:absolute; display:inline-block; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 0; right: 13px; background-color: #fff; padding: 2px 5px; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 13px; line-height: 17px; color: var(--black); } div.radiobuttons-list > span.optional { position: absolute; top: -20px; }
JS
List Radio-Buttons
Letzte Änderung: 11.12.2024 - 17:11 Uhr
×
optional
Radio Button
Radio Button
Radio Button