CodePen Embed - GRjbRXL

<div class="container"> 




<div class="panel__mainFiltersWrapper">
      <fieldset class="select selectCheckboxes panel__selectCheckboxes">
        <legend class="selectCheckboxes__title select-title-js">размер</legend>

        <div class="selectCheckboxes__droplist select-droplist-js">
          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xxs (40-42)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xs (42-44)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">s (44-46)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">m (46-48)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input disabled name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">L (48-50)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xl (50-52)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>
        </div>
      </fieldset>

      <fieldset class="select selectCheckboxes panel__selectCheckboxes">
        <legend class="selectCheckboxes__title select-title-js">цвет</legend>

        <div class="selectCheckboxes__droplist select-droplist-js">
          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xxs (40-42)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xs (42-44)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">s (44-46)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">m (46-48)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input disabled name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">L (48-50)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xl (50-52)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>
        </div>
      </fieldset>

      <fieldset class="select selectCheckboxes panel__selectCheckboxes">
        <legend class="selectCheckboxes__title select-title-js">материал</legend>

        <div class="selectCheckboxes__droplist select-droplist-js">
          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xxs (40-42)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xs (42-44)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">s (44-46)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">m (46-48)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input disabled name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">L (48-50)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>

          <div class="selectCheckboxes__line">
            <input name="#" class="selectCheckboxes__input" type="checkbox" />
            <label for="#" class="selectCheckboxes__label">xl (50-52)</label>
            <span class="selectCheckboxes__checkboxIcon"></span>
          </div>
        </div>
      </fieldset>

      <fieldset class="select selectCheckboxes panel__selectCheckboxes">
        <legend class="selectCheckboxes__title select-title-js">Цена</legend>

        <div class="selectCheckboxes__droplist select-droplist-js"></div>
      </fieldset>

      <button type="reset" class="panel__resetButton">Отключить фильтры</button>
    </div>

</div>

@mixin backgroundImage($url, $size) {
  background-position: center;
  background-repeat: no-repeat;
  background-size: $size;
  background-image: url($url);
}

@mixin responsiveImage($fit) {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: $fit;
}

@mixin placeholder {
  font-weight: 200;
  font-size: 1.2rem;
  line-height: 1.2;
}

@mixin fixLinksWidth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:focus,
:active {
  outline: none !important;
}
a:focus,
a:active {
  outline: none;
}

nav,
footer,
header,
aside {
  display: block;
}

html,
body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}
button {
  cursor: pointer;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
a,
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
ul li {
  list-style: none;
}
img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 400;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

address > * {
  font-style: normal;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

p {
  margin: 0;
}

a:hover {
  color: inherit;
}

/*--------------------*/


$fontSize: 1.8rem;
$sidePadding: 1.5rem;

.selectCheckboxes {
  $selectCheckboxes: &;
  position: relative;

  &.open {
    #{$selectCheckboxes}__title {
      &:after {
        transform: rotate(270deg);
      }
    }

    #{$selectCheckboxes}__droplist {
      max-height: 20rem;
      padding: 2rem $sidePadding;
      visibility: visible;
      opacity: 1;
    }
  }

  &__title {
    font-size: $fontSize;
    cursor: pointer;
    display: flex;
    position: relative;
    text-transform: capitalize;
    padding: 0 2.8rem 0 0;

    &::before,
    &::after {
      content: "";
      transition: 0.3s ease;
      display: block;
      position: absolute;
    }

    &.chose {
      &::before {
        left: -10px;
        top: 0%;
        transform: translateY(100%);
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: black;
      }
    }
    &:after {
      right: 0;
      transform: rotate(90deg);
      @include backgroundImage("../img/icons/arrow.svg", contain);
      width: 15px;
      height: 15px;
    }
  }

  &__droplist {
    @include fixLinksWidth;
    transition: 0.3s ease;
    border: 0.5px solid #828282;
    background: #ffffff;
    position: absolute;
    top: calc(#{$fontSize} + 6px);
    min-width: 150%;
    max-height: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
  }

  &__line {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    padding: 4.5px 0;
    font-size: 1.4rem;
    position: relative;
    cursor: pointer;
    &:after {
      content: "";
      position: absolute;
      left: 0px;
      top: 0;
      min-width: 100%;
      min-height: 100%;
      background-color: rgba(0, 0, 0, 0);
    }
  }

  &__label {
    text-transform: uppercase;
    font-family: "Bebas Neue";
    font-size: 1.4rem;
  }

  &__input {
    position: absolute;
    left: $sidePadding;
    opacity: 0;
    cursor: pointer;
  }

  &__input:checked + &__label + &__checkboxIcon {
 background:black;
  }

  &__input:disabled + &__label {
    color: #6b6b6b;
  }

  &__checkboxIcon {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #828282;
    margin-right: 5px;
  }
}

.selectSideBar {
  $selectSideBar: &;
  &.open {
    #{$selectSideBar}__droplist {
      max-height: 17rem;
      opacity: 1;
      overflow-y: auto;
    }

    #{$selectSideBar}__title {
      margin-bottom: 4rem;
      &:after {
        transform: translateY(-50%) rotate(270deg);
      }
    }
  }

  &__droplist {
    overflow: hidden;
    transition: 0.3s ease;
    width: 100%;
    max-height: 0;
    @include fixLinksWidth;
    opacity: 0;
  }

  &__title {
    cursor: pointer;
    position: relative;
    padding-right: 3rem;

    &:after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transition: 0.3s ease;
      transform: translateY(-50%) rotate(90deg);
   background-color:black;
      width: 15px;
      height: 15px;
      display: block;
    }
  }
}





.container {
  max-width:100%;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
    align-items: center;
}

View Compiled

class Select {
  constructor(el) {
    if (typeof el === "string") {
      el = document.querySelectorAll(el);
    }

    if (typeof el[Symbol.iterator] === "function") {
      return [...el].map((n) => new this.constructor(n));
    }

    this.$select = el;

    // this.$inputField = this.$select.querySelector("input");
    this.$label = this.$select.querySelector(".select-title-js");
    this.$droplist = this.$select.querySelector(".select-droplist-js");

    this.$body = document.querySelector("body");

    this.handleClick();
    this.hanldeClickWindow();
  }

  openState() {
    this.$select.classList.add("open");
  }

  closeState() {
    this.$select.classList.remove("open");
  }

  /* open/close dropdown list */
  toggleState() {
    if (
      this.$select.classList.contains("open") &&
      event.target.parentNode != this.$droplist &&
      event.target != this.$droplist
    ) {
      this.closeState();
    } else {
      this.openState();
    }
  }

  handleClick() {
    this.$select.addEventListener("mouseup", () => {
      this.toggleState();
    });
  }

  /* change value of input */

  hanldeClickWindow() {
    window.addEventListener("click", () => {
      if (event.target.parentNode != this.$select && event.target.parentNode != this.$droplist) {
        this.closeState();
      }
    });
  }
}


const select = new Select(".select");





const toggleCheckbox = () => {
  document.addEventListener("click", () => {
    let $input = event.target.querySelector("input");
    let $inputCheked = event.target.offsetParent.querySelectorAll("input:checked");
    let $title = event.target.offsetParent.previousElementSibling;

    if (event.target.classList.contains("selectCheckboxes__line")) {
      if ($input.hasAttribute("disabled")) return false;
      $input.checked ? ($input.checked = false) : ($input.checked = true);

      $inputCheked.length ? $title.classList.add("chose") : $title.classList.remove("chose");
    }
  });
};

toggleCheckbox();

This Pen is owned by Dmitry on CodePen.

See more by @Demonter on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.