Untitled

dabblet.css

* {
  box-sizing: border-box;
  font-family: arial;
}




#selectbox{
  position: relative;
  width: 300px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  margin: 100px 0 0 200px;
  text-align: center;
  box-shadow: 0 0 3px rgb(140, 150, 150);
}

#selectbox #default-value{
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 40px;
  transition: background 0.2s;
}

#selectbox span{
  cursor: pointer;
}

#selectbox .arrow{
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 13px;
}

#selectbox #default-value:hover{
  background: #E3E3E3 !important;
}

#selecbox #default-value:selection{
  background: none;
}

#selectbox .selected{
  background: lightblue;
 }
#selectbox ul{
  position: absolute;
  top: 24px;
  left: 0;
  width: 98%;
  height: 0;
  overflow: hidden;
  margin-left: 1%;
  list-style: none;
  background: white;
  border: 1px solid rgb(230, 230, 230);
  padding: 0;
  text-align: center;
  border-radius: 0 0 6px 6px;
  transition: height 0.3s ease-in-out;
 }

#selectbox li{
  display: block;  
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}



#selectbox li:hover{
  background: #E3E3E3;
}

#selectbox li:active{
  background: lightgray;
}

#selectbox li::selection{
  background: none;
}

dabblet.html

<div class="container">
  <div id="selectbox" class="active">
  	<span id="default-value">Birinci</span>
  	<span class="arrow">▼</span>
  	<ul>
 		<li class="selected">Birinci</li> 
 		<li>İkinci</li>
 		<li>Üçüncü</li>
 		<li>Dördüncü</li>
 		<li>Beşinci</li>
 	</ul>
  </div>
<div>

dabblet.js

document.querySelector('#selectbox').addEventListener('click', handleSelectboxClick);



function closeSelectbox(){
  const element = this;
  setTimeout(function(){
    element.querySelector('ul').style.height= '0px';
    element.querySelector('#default-value').style.background= 'white';
    element.querySelector('.arrow').innerHTML = '▼';
  }, 150);
}


document.querySelector('#selectbox').addEventListener('focusout', closeSelectbox);
function handleSelectboxClick(e){
  const length = this.querySelectorAll('li').length;
  const height = length * 40;
  const list = this.querySelector('ul');
  const defaultValue = this.querySelector('#default-value');
  const arrow = this.querySelector('.arrow');
  if(list.style.height == '0px'){
    defaultValue.style.background = 'lightgray';
    list.style.height = height + 'px';
    arrow.innerHTML = '▲';
  }else{
    list.style.height = '0';
    arrow.innerHTML = '▼';
    defaultValue.style.background = 'white';
    document.querySelector('.container').click();  
  }
  
  if(e.target.tagName == 'LI'){
    this.querySelector('.selected').classList.remove('selected');
    this.querySelector('#default-value').innerHTML = e.target.innerHTML;
    e.target.classList.add('selected');
  }
}

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}