Erweiterte Suche (MS)
CODE
×
HTML
<div class='inpage-search-extended-ms'> <button class='inpage-search-title' href='#' tabindex='0' aria-expanded='false' aria-controls='custom-search'>Erweiterte Suche</button> <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> <div class='inpage-search-area-ms' aria-hidden='true'><div class='selectbox selectbox-small left mitglieder-input' id="ms_t7-input" data-name="party" tabindex="0" aria-expanded="false" aria-controls="dropdown-partei"> <div class='select'>Partei </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'>Partei</span> <div class='options options-oga' id="dropdown-partei" aria-hidden="true"> <label class="checkbox-block oga-1"> <input type="checkbox" id="f0" class="pa" checked="checked" data-label="Alle" data-exclude="true"> <span class="checked"></span><span class="checkbox"></span>Alle </label> <label class="checkbox-block oga-1"> <input type="checkbox" data-value="SVP" id="p1" class="pa" checked="checked" data-label="SVP"> <span class="checked"></span><span class="checkbox"></span>SVP </label> <label class="checkbox-block oga-1"> <input type="checkbox" data-value="FDP" id="p2" class="pa" checked="checked" data-label="FDP"><span class="checked"></span><span class="checkbox"></span>FDP </label> <label class="checkbox-block oga-1"> <input type="checkbox" data-value="Die Mitte" id="p3" class="pa" checked="checked" data-label="Die Mitte"><span class="checked"></span><span class="checkbox"></span>Die Mitte </label> </div> </div> <div class='selectbox selectbox-small right mitglieder-input' id="ms_t8-input" data-name="fraction" tabindex="0" aria-expanded="false" aria-controls="dropdown-fraktion"> <div class='select' data-text="Fraktion">Fraktion</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'>Fraktion</span> <div class='options options-oga' id="dropdown-fraktion" aria-hidden="true"> <label class="checkbox-block oga-1"> <input type="checkbox" id="f0" class="fr" checked="checked" data-label="Alle" data-value="Alle" data-exclude="true"><span class="checked"></span><span class="checkbox"></span>Alle </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="f1" class="fr" checked="checked" data-value="SVP" data-label="SVP"><span class="checked"></span><span class="checkbox"></span>SVP </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="f2" class="fr" checked="checked" data-value="SP-JUSO-PSA" data-label="SP-JUSO-PSA"><span class="checked"></span><span class="checkbox"></span>SP-JUSO-PSA </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="f3" class="fr" checked="checked" data-value="FDP" data-label="FDP"><span class="checked"></span><span class="checkbox"></span>FDP </label> </div> </div> <div class='selectbox selectbox-small left mitglieder-input' id="ms_t1-input" tabindex="0" aria-expanded="false" data-name="from" aria-controls="dropdown-from"> <div class='select' id="memberFrom" data-text="Mitglied von ...">Mitglied von ...</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'>Mitglied von ...</span> <ul class='options single-select' aria-hidden="true" role="listbox" aria-labelledby="memberFrom" id="dropdown-from"> <li tabindex="0" class="option og-2" role="option" data-value="2021">2021</li> <li tabindex="0" class="option og-2" role="option" data-value="2020">2020</li> <li tabindex="0" class="option og-2" role="option" data-value="2019">2019</li> <li tabindex="0" class="option og-2" role="option" data-value="2018">2018</li> <li tabindex="0" class="option og-2" role="option" data-value="2017">2017</li> <li tabindex="0" class="option og-2" role="option" data-value="2016">2016</li> <li tabindex="0" class="option og-2" role="option" data-value="2015">2015</li> <li tabindex="0" class="option og-2" role="option" data-value="2014">2014</li> <li tabindex="0" class="option og-2" role="option" data-value="Alle">vor 2014</li> </ul> </div> <div class='selectbox selectbox-small right mitglieder-input' id="ms_t2-input" tabindex="0" aria-expanded="false" data-name="to" aria-controls="dropdown-to"> <div class='select' id="toLabel" data-text="bis ...">bis ...</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'>bis ...</span> <ul class='options single-select' role="listbox" aria-hidden="true" aria-labelledby="toLabel" id="dropdown-to"> <li tabindex="0" selected class="option og-2" role="option">bis heute</li> <li tabindex="0" class="option og-2" role="option" data-value="2020">2020</li> <li tabindex="0" class="option og-2" role="option" data-value="2019">2019</li> <li tabindex="0" class="option og-2" role="option" data-value="2018">2018</li> <li tabindex="0" class="option og-2" role="option" data-value="2017">2017</li> <li tabindex="0" class="option og-2" role="option" data-value="2016">2016</li> <li tabindex="0" class="option og-2" role="option" data-value="2015">2015</li> <li tabindex="0" class="option og-2" role="option" data-value="2014">2014</li> </ul> </div> <div class='form-group-medium mitglieder-input' data-name="residence"> <input type='text' value='' class='floating-label' id='ms_t3-input' placeholder='Wohnort'> <label class='floating-label'>Wohnort</label> </div> <div class='selectbox selectbox-small right mitglieder-input' id="ms_t4-input" tabindex="0" aria-expanded="false" data-name="constituency" aria-controls="dropdown-constituency"> <div class='select' id="constituencyLabel" data-text="Wahlkreis">Wahlkreis</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'>Wahlkreis</span> <ul class='options single-select' aria-hidden="true" role="listbox" aria-labelledby="constituencyLabel" id="dropdown-constituency"> <li tabindex="0" class="option og-2" role="option" data-exclude="true">Alle</li> <li tabindex="0" class="option og-2" role="option" data-value="Bern">Bern</li> <li tabindex="0" class="option og-2" role="option" data-value="Berner Jura">Berner Jura</li> <li tabindex="0" class="option og-2" role="option" data-value="Emmental">Emmental</li> <li tabindex="0" class="option og-2" role="option" data-value="Thun">Thun</li> <li tabindex="0" class="option og-2" role="option" data-value="Oberland">Oberland</li> </ul> </div> <div class='selectbox selectbox-small left mitglieder-input' id="ms_t5-input" tabindex="0" aria-expanded="false" data-name="sex" aria-controls="dropdown-sex"> <div class='select' id="sexLabel" data-text="Geschlecht">Geschlecht</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'>Geschlecht</span> <ul class='options single-select' aria-hidden="true" role="listbox" aria-labelledby="sexLabel" id="dropdown-sex"> <li tabindex="0" class="option og-2" role="option" data-value="Alle" data-exclude="true">Frauen und Männer </li> <li tabindex="0" class="option og-2" role="option" data-value="f">Frauen</li> <li tabindex="0" class="option og-2" role="option" data-value="m">Männer</li> </ul> </div> <div class='selectbox selectbox-small right mitglieder-input valid' id="ms_t6-input" tabindex="0" aria-expanded="false" data-name="status" aria-controls="dropdown-status"> <div class='select' id="statusLabel" data-text="Status">Status</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'>Status</span> <ul class='options single-select' aria-hidden="true" role="listbox" aria-labelledby="statusLabel" id="dropdown-status"> <li tabindex="0" class="option og-2" role="option" data-value="Alle" data-exclude="true">Alle</li> <li tabindex="0" class="option og-2 focused" role="option" data-value="true">Aktuelle Mitglieder</li> <li tabindex="0" class="option og-2" role="option" data-value="false">Ehemalige Mitglieder </li> </ul> </div> <div class='selectbox selectbox-small left mitglieder-input' id="ms_t9-input" tabindex="0" aria-expanded="false" data-name="interest"> <div class='select' data-text="Interessenbindung">Interessenbindung</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'>Interessenbindung</span> <div class='options options-oga' id="dropdown-ib" aria-hidden="true"> <label class="checkbox-block oga-1"> <input type="checkbox" id="i1" class="ib" data-label="Interessenbindung 1" data-value="Interessenbindung 1"><span class="checked"></span><span class="checkbox"></span>Interessenbindung 1 </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="i2" class="ib" data-label="Interessenbindung 2" data-value="Interessenbindung 2"><span class="checked"></span><span class="checkbox"></span>Interessenbindung 2 </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="i3" class="ib" data-label="Interessenbindung 3" data-value="Interessenbindung 3"><span class="checked"></span><span class="checkbox"></span>Interessenbindung 3 </label> <label class="checkbox-block oga-1"> <input type="checkbox" id="i4" class="ib" data-label="Interessenbindung 4" data-value="Interessenbindung 4"><span class="checked"></span><span class="checkbox"></span>Interessenbindung 4 </label> </div> </div> <div class="buttons"> <button class='search-reset secondary not-active'>Zurücksetzen</button> <button class='search-submit primary'>Suchen</button> </div></div> </div>
CSS
@media screen and (max-width: 767px) { div.inpage-search-extended-ms { padding-top: 5px; padding-bottom: 5px; } } div.inpage-search-extended-ms svg.select { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } div.inpage-search-extended-ms svg.select:hover { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } div.inpage-search-extended-ms button.inpage-search-title:hover + svg.select { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } button.inpage-search-title { position:relative; display:inline-block; text-decoration:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-size: 24px; line-height: 28px; color: var(--black); cursor: default; border-bottom: 1px solid rgba(255,255,255,1); padding-top: 16px; padding-right: 12px; padding-bottom: 0; padding-left: 0; } div.inpage-search-area-ms { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; position:relative; overflow:hidden; display:none; width: 100%; } svg.select { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; margin-bottom: 6px; width: 18px; height: 12px; } button.inpage-search-title:hover, button.inpage-search-title:focus { } @media screen and (max-width: 767px) { button.inpage-search-title { font-size: 21px; line-height: 25px; } }
JS
Erweiterte Suche (MS)
Erstellt: 14.10.2021 - 21:06 Uhr
Letzte Änderung: 16.11.2021 - 19:49 Uhr
×
Erweiterte Suche
Partei
Partei
Alle
SVP
FDP
Die Mitte
Fraktion
Fraktion
Alle
SVP
SP-JUSO-PSA
FDP
Mitglied von ...
Mitglied von ...
2021
2020
2019
2018
2017
2016
2015
2014
vor 2014
bis ...
bis ...
bis heute
2020
2019
2018
2017
2016
2015
2014
Wohnort
Wahlkreis
Wahlkreis
Alle
Bern
Berner Jura
Emmental
Thun
Oberland
Geschlecht
Geschlecht
Frauen und Männer
Frauen
Männer
Status
Status
Alle
Aktuelle Mitglieder
Ehemalige Mitglieder
Interessenbindung
Interessenbindung
Interessenbindung 1
Interessenbindung 2
Interessenbindung 3
Interessenbindung 4
Zurücksetzen
Suchen