Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Formularelemente Auswahlfeld

Verwendung

Verwendung innerhalb von Formularen zur Auswahl und als Filter.

Vorschau

HTML

                
                  <div class="container">
  <div class="form margin--sm">
    <div class="errors_wrapper">
      <div class="cms_common_errors">
        <div>
          <b>Hinweis:</b> Bitte prüfen Sie das Formular auf Fehler und
          korrigieren Sie diese.
        </div>
      </div>
    </div>
    <fieldset>
      <h3 class="fieldset_title">Kontakt</h3>
      <div class="fieldset_inner">
        <div class="fields_wrapper row">
          <div class="field_wrapper field_regular col-xs-12 col-sm-6 field_combobox">
            <div class="field_wrapper_inner">
              <label>Anrede<span class="cms_common_mandatory_asterisk"> *</span></label>
              <div class="form_field">
                <select name="salutation" class="cms_gui_combobox" size="1" data-placeholder="Bitte auswählen" tabindex="-1" aria-hidden="true">
                  <option value="" selected="selected" class="">Bitte
                    auswählen
                  </option>
                  <option value="13" class="">Herr</option>
                  <option value="14" class="">Frau</option>
                </select>
              </div>
            </div>
          </div>
          <div class="field_wrapper field_regular col-xs-12 col-sm-6 field_combobox">
            <div class="field_wrapper_inner">
              <label class="cms_common_error">Anrede<span class="cms_common_mandatory_asterisk"> *</span></label>
              <div class="form_field">
                <select name="salutation" class="cms_gui_combobox cms_common_error " size="1" data-placeholder="Bitte auswählen" tabindex="-1" aria-hidden="true">
                  <option value="" selected="selected" class="">Bitte
                    auswählen
                  </option>
                  <option value="13" class="">Herr</option>
                  <option value="14" class="">Frau</option>
                </select>
              </div>
              <i class="error" data-toggle="tooltip" data-placement="top" title="" data-original-title="Darf nicht leer sein"></i>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</div>

<form method="post" enctype="multipart/form-data" accept-charset="UTF-8">
  <div class="event_overview">
    <div class="finder container">
      <h3 class="margin--sm">Filter</h3>
      <div class="row">
        <div class="col-sm-6 col-xs-12 col-input col-filter">
          <select size="1" tabindex="-1" aria-hidden="true">
            <option value="" selected="selected" class="">Umkreis</option>
            <option value="50">50 km</option>
            <option value="100">100 km</option>
          </select>
        </div>
        <div class="col-sm-3 col-xs-12 col-button col-filter">
          <input type="submit" value="Filtern" class="btn btn-primary" title="Filtern" tabindex="7" data-submittable="click">
        </div>
        <div class="col-sm-3 col-xs-12 col-button col-filter">
          <input type="submit" value="Filter zurücksetzen" class="btn btn-light" title="Filter zurücksetzen" disabled="disabled" tabindex="8" data-submittable="click">
        </div>
      </div>
    </div>
  </div>
</form>

CSS

              @charset "UTF-8";
input {
  -moz-appearance: none;
  -webkit-appearance: none;
}
input::-webkit-input-placeholder {
  color: #b3b3b3 !important;
}
input:-moz-placeholder {
  color: #b3b3b3 !important;
}
input::-moz-placeholder {
  color: #b3b3b3 !important;
}
input:-ms-input-placeholder {
  color: #b3b3b3 !important;
}

.form .content_wrapper {
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .form .content_wrapper {
    margin-bottom: 30px;
  }
}
.form .errors_wrapper {
  background-color: #fff2f3;
  border: 1px dashed #d50101;
  color: #d50101;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
  line-height: 1.1875rem;
  border-radius: 6px;
  margin-bottom: 55px;
  padding: 10px;
}
.form .errors_wrapper .cms_common_errors > div {
  margin-bottom: 5px;
}
.form .errors_wrapper .cms_common_errors > div.cms_common_errors_title {
  margin-bottom: 15px;
}
.form fieldset {
  position: relative;
}
.form fieldset:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
  background-image: -moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: -webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-image: linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
  background-size: 100%;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
}
.form fieldset .fieldset_title {
  background-color: #fff;
  display: inline-block;
  padding-right: 10px;
  position: relative;
  text-align: left;
  top: -13px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 25px;
  line-height: 1.5625rem;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 22px;
    line-height: 1.375rem;
  }
}
@media screen and (max-width: 400px) {
  .form fieldset .fieldset_title {
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 21px;
    line-height: 1.3125rem;
  }
}
@media screen and (max-width: 350px) {
  .form fieldset .fieldset_title {
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
  }
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_title {
    top: -10px;
  }
}
.form fieldset .fieldset_inner {
  margin-top: -24px;
  padding: 55px 0;
}
@media screen and (max-width: 767px) {
  .form fieldset .fieldset_inner {
    margin-top: -19px;
  }
}
.form fieldset.no_title .fieldset_inner {
  margin-top: 0;
}
.form fieldset:last-child .fieldset_inner:not(.keep-space) {
  padding-bottom: 0;
}
.form fieldset.controls .mandatory_notice {
  color: #7c7c7b;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 14px;
  line-height: 0.875rem;
  text-align: center;
}
.form fieldset.controls .button_wrapper {
  text-align: right;
}
.form fieldset.controls .button_wrapper .btn {
  margin-top: 10px;
}
.form .fields_wrapper .field_wrapper {
  margin-bottom: 22px;
}
.form .fields_wrapper .field_wrapper:last-child {
  margin-bottom: 0;
}
.form .fields_wrapper .field_wrapper.field_clear {
  clear: both;
}
.form .fields_wrapper .field_wrapper.field_combobox .field_wrapper_inner {
  position: relative;
}
.form .fields_wrapper .field_wrapper.field_combobox .field_wrapper_inner label {
  background-color: #fff;
  color: #7c7c7b;
  left: 15px;
  padding: 0 5px;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 14px;
  line-height: 0.875rem;
  position: absolute;
  top: -6px;
  z-index: 10;
}
.form .fields_wrapper .field_wrapper.field_combobox .field_wrapper_inner label.cms_common_error {
  color: #d50101;
}
.form .fields_wrapper .field_wrapper.field_combobox .field_wrapper_inner label.cms_common_error .cms_common_mandatory_asterisk {
  color: #d50101;
}
.form .fields_wrapper .field_wrapper.field_combobox .field_wrapper_inner i.error {
  right: 59px;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner {
  position: relative;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 15px;
  z-index: 100;
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.form .fields_wrapper .field_wrapper .field_wrapper_inner i.error:before {
  color: #d50101;
}
.form select {
  width: 100%;
}
.form select.cms_common_error {
  background-color: #fff2f3;
  border: 1px dashed #d50101;
  color: #d50101;
  padding-right: 44px;
}
.form select.cms_common_error + .select2-container.select2-container--default .select2-selection.select2-selection--single {
  background-color: #fff2f3;
  border: 1px dashed #d50101;
}
.form .cms_common_mandatory_asterisk {
  color: #0069b4;
}

/* select2 styles */
.select2-container.select2-container--default {
  outline: none;
}
.select2-container.select2-container--default .select2-selection.select2-selection--single {
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  height: 44px;
  transition: 0.2s border-color ease;
  outline: none;
}
@media screen and (max-width: 767px) {
  .select2-container.select2-container--default .select2-selection.select2-selection--single {
    transition: none;
  }
}
.select2-container.select2-container--default .select2-selection.select2-selection--single:focus {
  border-color: #939393;
}
.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered {
  color: #4c4c4c;
  line-height: 44px;
  padding: 0 44px 0 10px;
  font-size: 14px;
  font-size: 0.875rem;
}
.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow {
  border-left: 1px solid #d9d9d9;
  height: 44px;
  right: 0;
  top: 0;
  width: 44px;
}
.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow b {
  border-color: #0069b4 transparent transparent transparent;
  transition: 0.2s border-color ease;
}
@media screen and (max-width: 767px) {
  .select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow b {
    transition: none;
  }
}
.select2-container.select2-container--default .select2-selection.select2-selection--single .select2-selection__placeholder {
  color: #b3b3b3;
}
.select2-container.select2-container--default.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #0069b4 transparent;
}
.select2-container.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select2-container.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__option {
  font-size: 14px;
  font-size: 0.875rem;
}
.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__option[aria-selected=true] {
  background-color: #fff;
  color: #f9b200;
}
.select2-container.select2-container--default .select2-dropdown .select2-results .select2-results__option.select2-results__option--highlighted {
  background-color: #0069b4;
  color: #fff;
}

.tooltip {
  padding: 0 !important;
}
.tooltip .tooltip-inner {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  color: #4c4c4c;
  margin-bottom: 15px;
  max-width: 100vw;
  border-radius: 3px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 15px;
}
.tooltip .tooltip-inner img {
  height: auto;
  max-width: 100%;
}
.tooltip .tooltip-arrow {
  background-color: #fff;
  height: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
}
.tooltip.top .tooltip-arrow {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  bottom: 5px;
  margin: 0;
}
.tooltip.bottom .tooltip-inner {
  margin-bottom: 0;
  margin-top: 15px;
}
.tooltip.bottom .tooltip-arrow {
  border: none;
  border-left: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  margin: 0;
  top: 5px;
}

/* buttons */
.btn {
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-size: .9375rem;
  font-weight: normal;
  line-height: 17px;
  line-height: 1.0625rem;
  margin-bottom: 0;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  top: 0;
  transition: .2s top ease;
  vertical-align: middle;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}
.btn:hover, .btn:focus {
  color: #333;
  text-decoration: none;
}
.btn:active {
  background-image: none;
  box-shadow: none;
  top: 1px;
}

.btn-primary {
  background-color: #0069b4;
  border-color: #005a9b;
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #004b81;
  border-color: #00365d;
  color: #fff;
}
.btn-primary:active {
  background-image: none;
}

.btn-primary {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
  border: none;
  box-shadow: inset 0 -3px rgba(0, 0, 0, 0.3);
  transition: .2s top ease, .2s box-shadow ease;
}
.btn-primary:active {
  background-color: #0069b4;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjliNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzODdjMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");
  background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0069b4), color-stop(100%, #3387c3));
  background-image: -moz-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: -webkit-linear-gradient(bottom, #0069b4, #3387c3);
  background-image: linear-gradient(to top, #0069b4, #3387c3);
  background-size: 100%;
}

.btn-light {
  background-color: #fff;
  border: solid 1px #e6e6e6;
  box-shadow: 0 2px rgba(0, 0, 0, 0.05);
  color: #0069b4;
  padding: 11px 20px;
  transition: .2s color ease, .2s top ease, .2s box-shadow ease;
}
.btn-light:hover {
  color: #f9b200;
}
.btn-light:focus {
  color: #0069b4;
}
.btn-light:focus:hover {
  color: #f9b200;
}

@media screen and (max-width: 767px) {
  .btn-light {
    transition: .2s top ease, .2s box-shadow ease;
  }
}
.margin--sm {
  margin-bottom: 25px;
}

.event_overview .finder {
  margin-bottom: 70px;
}
.event_overview .finder .col-button .btn {
  display: block;
  width: 100%;
}
.event_overview .finder .col-message {
  margin-top: 15px;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .event_overview .finder .col-filter {
    margin-bottom: 15px;
  }
  .event_overview .finder .col-filter:nth-child(3), .event_overview .finder .col-filter:nth-child(4) {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .event_overview .finder .col-filter {
    margin-bottom: 15px;
  }
  .event_overview .finder .col-filter:last-child {
    margin-bottom: 0;
  }
}

SCSS

              @import "../general/_general";

$form-border-grey: #d9d9d9;
$form-border-grey-focus: #939393;
$form-error-background: #fff2f3;
$form-error-text: #d50101;

input {
  @include placeholder {
    color: $grey !important;
  }
  -moz-appearance: none;

  -webkit-appearance: none;
}

.form {
  .content_wrapper {
    margin-bottom: 50px;

    @media screen and (max-width: 767px) {
      margin-bottom: 30px;
    }
  }

  .errors_wrapper {
    background-color: $form-error-background;
    border: 1px dashed $form-error-text;
    color: $form-error-text;
    @include rem-font-size(14);
    @include rem-line-height(19);
    @include border-radius(6px);
    margin-bottom: 55px;
    padding: 10px;

    .cms_common_errors {
      > div {
        margin-bottom: 5px;

        &.cms_common_errors_title {
          margin-bottom: 15px;
        }
      }
    }
  }

  fieldset {
    position: relative;

    &:before {
      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…Igd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
      background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(215, 215, 215, 0)), color-stop(5%, #d7d7d7), color-stop(95%, #d7d7d7), color-stop(100%, rgba(215, 215, 215, 0)));
      background-image: -moz-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image: -webkit-linear-gradient(left, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-image: linear-gradient(to right, rgba(215, 215, 215, 0) 0%, #d7d7d7 5%, #d7d7d7 95%, rgba(215, 215, 215, 0) 100%);
      background-size: 100%;
      content: '';
      display: block;
      height: 1px;
      width: 100%;
    }

    .fieldset_title {
      background-color: $white;
      display: inline-block;
      padding-right: 10px;
      position: relative;
      text-align: left;
      top: -13px;

      @include rem-font-size(20);
      @include rem-line-height(25);

      @media screen and (max-width: 767px) {
        @include rem-font-size(18);
        @include rem-line-height(22);
      }

      @media screen and (max-width: 400px) {
        @include rem-font-size(17);
        @include rem-line-height(21);
      }

      @media screen and (max-width: 350px) {
        @include rem-font-size(16);
        @include rem-line-height(20);
      }

      @media screen and (max-width: 767px) {
        top: -10px;
      }
    }

    .fieldset_inner {
      margin-top: -24px;

      padding: 55px 0;

      @media screen and (max-width: 767px) {
        margin-top: -19px;
      }
    }

    &.no_title {
      .fieldset_inner {
        margin-top: 0;
      }
    }

    &:last-child {
      .fieldset_inner:not(.keep-space) {
        padding-bottom: 0;
      }
    }

    &.controls {
      .mandatory_notice {
        color: $darkgrey;
        @include rem-font-size(12);
        @include rem-line-height(14);
        text-align: center;
      }
      .button_wrapper {
        text-align: right;

        .btn {
          margin-top: 10px;
        }
      }
    }
  }

  .fields_wrapper {
    .field_wrapper {
      margin-bottom: 22px;

      &:last-child {
        margin-bottom: 0;
      }

      &.field_clear {
        clear: both;
      }

      &.field_combobox {
        .field_wrapper_inner {
          position: relative;

          label {
            background-color: $white;
            color: $darkgrey;
            left: 15px;
            padding: 0 5px;
            @include rem-font-size(12);
            @include rem-line-height(14);
            position: absolute;
            top: -6px;
            z-index: 10;

            &.cms_common_error {
              color: $form-error-text;

              .cms_common_mandatory_asterisk {
                color: $form-error-text;
              }
            }
          }
        }
      }

      &.field_combobox {
        .field_wrapper_inner {
          i {
            &.error {
              right: 59px;
            }
          }
        }
      }

      .field_wrapper_inner {
        position: relative;

        i {
          &.error {
            @include autocenterY();
            position: absolute;
            right: 15px;
            @include schoeck-icon($icon-info);
            z-index: 100;

            &:before {
              color: $form-error-text;
            }
          }
        }
      }
    }
  }

  select {
    width: 100%;

    &.cms_common_error {
      background-color: $form-error-background;
      border: 1px dashed $form-error-text;
      color: $form-error-text;
      padding-right: 44px;
    }
  }

  select.cms_common_error {
    & + .select2-container {
      &.select2-container--default {
        .select2-selection {
          &.select2-selection--single {
            background-color: $form-error-background;
            border: 1px dashed $form-error-text;
          }
        }
      }
    }
  }

  .cms_common_mandatory_asterisk {
    color: $blue;
  }
}

/* select2 styles */

.select2-container {
  &.select2-container--default {
    outline: none;

    .select2-selection {
      &.select2-selection--single {
        @include border-radius(6px);
        background-color: #fff;
        border: 1px solid $form-border-grey;
        height: 44px;
        @include transition($linkcolor-transition-duration border-color ease);
        outline: none;

        @media screen and (max-width: 767px) {
          @include transition(none);
        }

        &:focus {
          border-color: $form-border-grey-focus;
        }

        .select2-selection__rendered {
          color: $darkergrey;
          line-height: 44px;
          padding: 0 44px 0 10px;
          @include rem-font-size(14);
        }

        .select2-selection__arrow {
          border-left: 1px solid $form-border-grey;
          height: 44px;
          right: 0;
          top: 0;
          width: 44px;

          b {
            border-color: $blue transparent transparent transparent;
            @include transition($linkcolor-transition-duration border-color ease);

            @media screen and (max-width: 767px) {
              @include transition(none);
            }
          }
        }

        .select2-selection__placeholder {
          color: $grey;
        }
      }
    }

    &.select2-container--open {
      .select2-selection {
        &.select2-selection--single {
          .select2-selection__arrow {
            b {
              border-color: transparent transparent $blue transparent;
            }
          }
        }
      }

      &.select2-container--above {
        .select2-selection--single {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        }
      }
      &.select2-container--below {
        .select2-selection--single {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
    .select2-dropdown {
      .select2-results {
        .select2-results__option {
          @include rem-font-size(14);

          &[aria-selected=true] {
            background-color: $white;
            color: $orange;
          }

          &.select2-results__option--highlighted {
            background-color: $blue;
            color: $white;
          }
        }
      }
    }
  }
}

.tooltip {
  padding: 0 !important;

  .tooltip-inner {
    background-color: $white;
    border: 1px solid $lightgrey;
    color: $darkergrey;
    margin-bottom: 15px;
    max-width: 100vw;
    @include border-radius(3px);
    @include box-shadow(0 0 20px rgba(0, 0, 0, .1));
    padding: 15px;

    img {
      height: auto;
      max-width: 100%;
    }
  }

  .tooltip-arrow {
    background-color: $white;
    height: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
  }

  &.top {
    .tooltip-arrow {
      border: none;
      border-bottom: 1px solid $lightgrey;
      border-right: 1px solid $lightgrey;
      bottom: 5px;
      margin: 0;
    }
  }

  &.bottom {
    .tooltip-inner {
      margin-bottom: 0;
      margin-top: 15px;
    }
    .tooltip-arrow {
      border: none;
      border-left: 1px solid $lightgrey;
      border-top: 1px solid $lightgrey;
      margin: 0;
      top: 5px;
    }
  }
}

/* buttons */
@import "../buttons/_code";

.margin--sm {
  margin-bottom: 25px;
}

.event_overview {
  .finder {
    margin-bottom: 70px;

    .col-button {
      .btn {
        display: block;
        width: 100%;
      }
    }

    .col-message {
      margin-top: 15px;
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      .col-filter {
        margin-bottom: 15px;

        &:nth-child(3),
        &:nth-child(4) {
          margin-bottom: 0;
        }
      }
    }

    @media screen and (max-width: $screen-xs-max) {
      .col-filter {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

JavaScript

                jQuery(document).ready(function () {
  jQuery('select').select2({
    minimumResultsForSearch: 20,
    width: '100%',
    placeholder: function () {
      jQuery(this).data('placeholder');
    }
  });

  jQuery('.form [data-toggle="tooltip"]').tooltip({
    container: 'body',
    html: true
  });
});

Abhängigkeiten

www.select2.github.io