Select-Box (small)
CODE
×
HTML
<div class='selectbox selectbox-small' tabindex="0" role="listbox"> <div class='select'>Label</div> <svg class='select' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 8' xml:space='preserve'><path d="M10.7,0.9L6,5.7L1.3,0.9L0.6,1.6L6,7.1l5.4-5.5L10.7,0.9z"/></svg> <span class='floating-label'>Label</span> <div class='options'><div class="option">Dies ist eine Option in einer Selectbox</div> <div class="option active">Dies ist eine ausgewählte Option in einer Selectbox</div> <div class="option">Noch eine Option</div> <div class="option">Es folgt eine weitere Option</div> <div class="option">Dies ist die letzte Option</div></div> </div>
CSS
@media screen and (max-width: 767px) { div.selectbox.selectbox-small { width: 100%; max-width: none; } } div.selectbox { position:relative; display:inline-block; border: 1px solid rgba(112,112,112,1); margin-top: 20px; margin-bottom: 20px; width: 100%; max-width: 800px; } div.select { color: rgba(112,112,112,1); line-height: 1.4; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 17px; padding-right: 62px; padding-bottom: 12px; padding-left: 28px; width: 100%; max-width: 800px; height: 59px; } span.floating-label { font-size: 13px; line-height: 17px; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:0; display:block; color: var(--black); } div.options { position:absolute; display:none; color: var(--black); max-height: 0px; } svg.select { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; margin-bottom: 6px; width: 18px; height: 12px; } div.selectbox > svg.select { position: absolute; top: 23px; right: 24px; } div.selectbox > span.floating-label { position: absolute; } div.selectbox > div.options { overflow-y: auto; }
JS
Select-Box (small)
Letzte Änderung: 15.01.2025 - 10:48 Uhr
×
Label
Label
Dies ist eine Option in einer Selectbox
Dies ist eine ausgewählte Option in einer Selectbox
Noch eine Option
Es folgt eine weitere Option
Dies ist die letzte Option