Google select

by Andrey Izman

HTML

<div class="freebirdFormviewerComponentsQuestionBaseHeader">
  <div class="freebirdFormviewerComponentsQuestionBaseTitleDescContainer">
    <div id="i50" class="freebirdFormviewerComponentsQuestionBaseTitle exportItemTitle freebirdCustomFont" role="heading" aria-level="3" aria-describedby="i53">What is your current job status?<span class="freebirdFormviewerComponentsQuestionBaseRequiredAsterisk" id="i53" aria-label="Required question"> *</span></div>
    <div class="freebirdFormviewerComponentsQuestionBaseDescription" id="i51"></div>
  </div>
</div>

<div jscontroller="liFoG" jsaction="rcuQ6b:vZc4S;O22p3e:zjh6rb;b2trFe:eVidQc;JIbuQc:d3sQLd;" class="freebirdFormviewerComponentsQuestionSelectRoot">

  <div role="listbox" aria-expanded="false" class="quantumWizMenuPaperselectEl appsMaterialWizMenuPaperselectSelect freebirdFormviewerComponentsQuestionSelectSelect freebirdThemedSelectDarkerDisabled noMaxWidth" jscontroller="YwHGTd" jsaction="click:cOuCgd(LgbsSe); keydown:I481le; keypress:Kr2w4b; mousedown:UX7yZ(LgbsSe),npT2md(preventDefault=true); mouseup:lbsD7e(LgbsSe); mouseleave:JywGue; touchstart:p6p2H(LgbsSe); touchmove:FwuNnf; touchend:yfqBxc(LgbsSe|preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd(LgbsSe); focus:AHmuwe; blur:O22p3e;b5SvAb:TvD9Pc;" jsshadow="" jsname="W85ice" aria-describedby="i51 i52" aria-labelledby="i50" aria-required="true">
  
    <div class="exportSelectList" jsname="LgbsSe" role="presentation" aria-hidden="true">
      <div class="quantumWizMenuPaperselectOptionList" jsname="d9BH4c" role="presentation" aria-hidden="true">
        <div class="quantumWizMenuPaperselectOption appsMaterialWizMenuPaperselectOption freebirdThemedSelectOptionDarkerDisabled exportOption isPlaceholder" jsname="wQNmvb" jsaction="" data-value="" aria-selected="false" tabindex="-1">
          <div class="quantumWizMenuPaperselectRipple exportInk" jsname="ksKsZd" style="top: 26.8125px; left: 353.5px; width: 380px; height: 380px;"></div><span jsslot=""...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

.quantumWizMenuPaperselectPopup {
  -webkit-transition: opacity .1s linear;
  transition: opacity .1s linear;
  background: #ffffff;
  border: 0;
  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  opacity: 0;
  outline: 1px solid transparent;
  overflow: hidden;
  overflow-y: auto;
  position: fixed;
  z-index: 2000;
}

.appsMaterialWizMenuPaperselectSelect[aria-expanded="true"] {
  .exportSelectPopup {
    display: block;
  }
  .exportSelectList {
    display: none;
  }
}
.appsMaterialWizMenuPaperselectSelect[aria-expanded="false"] {
  .exportSelectPopup {
    display: none;
  }
  .exportSelectList {
  display: block;
  }
}

.appsMaterialWizMenuPaperselectSelect .exportSelectPopup {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64, 67, 0.149);
  padding: 8px 0 8px 0;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.quantumWizMenuPaperselectEl.isOpen .quantumWizMenuPaperselectPopup {
  opacity: 1;
}

.quantumWizMenuPaperselectOption {
    border-color: transparent;
    color: #222;
    height: 0;
    list-style: none;
    outline: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 24px;
    position: relative;
    text-align: left;
    white-space: nowrap;
}
.appsMaterialWizMenuPaperselectOption {
    font-family: Roboto,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .2px;
    line-height: 20px;
    color: #202124;
    max-width: 280px;
    min-width: 112px;
    padding-right: 48px;
}

.quantumWizMenuPaperselectOption.isPlaceholder {
    color: rgba(0,0,0,0.54);
}
.quantumWizMenuPaperselectPopup .quantumWizMenuPaperselectOption {
    cursor:...

JavaScript

$(document).on("click", ".appsMaterialWizMenuPaperselectSelect .exportSelectPopup .appsMaterialWizMenuPaperselectOption", function() {
	const parent = $(this).closest('.appsMaterialWizMenuPaperselectSelect');
  parent.find(".appsMaterialWizMenuPaperselectOption").attr("aria-selected", "false");
  $(this).attr("aria-selected", "true");
  parent.removeClass("isOpen").attr("aria-expanded", "false");
});

$(document).on("click", ".appsMaterialWizMenuPaperselectSelect .exportSelectList", function() {
	const parent = $(this).closest('.appsMaterialWizMenuPaperselectSelect');
  //parent.find(".appsMaterialWizMenuPaperselectOption").attr("aria-selected", "true");
  //$(this).attr("aria-selected", "true");
  parent.addClass("isOpen").attr("aria-expanded", "true");
});
// isOpen