Inline Radio-Buttons (error)
CODE
×
HTML
<div class='radiobuttons error'> <span class='notice'><strong>Überschreibender Hinweistext</strong></span> <label class='radio' for="ry1"><input type="radio" name="r2" id="ry1" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio' for="ry2"><input type="radio" name="r2" id="ry2" /><span class="checked-r"></span><span class="radio"></span>noch ein Radio Button</label> <label class='radio' for="ry5"><input type="radio" name="r2" id="ry5" /><span class="checked-r"></span><span class="radio"></span>ein weiterer Radio Button</label> <label class='radio' for="ry3"><input type="radio" name="r2" id="ry3" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <label class='radio' for="ry4"><input type="radio" name="r2" id="ry4" /><span class="checked-r"></span><span class="radio"></span>Radio Button</label> <img class='help' src='img/Help Icon.svg'> <span class='error'>This is an error message!</span> </div>
CSS
div.radiobuttons { position:relative; border: 1px solid rgba(112,112,112,0.5); padding-top: 10px; padding-bottom: 10px; padding-left: 28px; padding-right: 62px; margin-top: 20px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; max-width: 800px; display:inline-block; width: 100%; } img.help { position: absolute; height: 31px; width: 31px; right: 16px; top: 33px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } span.error { color: var(--dark-red); display:inline-block; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 400; } label.radio { 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; } div.radiobuttons > img.help { position: absolute; top: 14px; right: 16px; } img.help:hover, img.help:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } 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; } span.notice + div { margin-top: -20px; }
JS
Inline Radio-Buttons (error)
Dieses Element bitte ....
Letzte Änderung: 17.01.2025 - 12:55 Uhr
×
Überschreibender Hinweistext
Radio Button
noch ein Radio Button
ein weiterer Radio Button
Radio Button
Radio Button
This is an error message!