• HTML
• CSS
• JS

HTML

<div class="select-container">
    <p class="select-label">Movie categories</p>
    <div class="select">
        <div class="selected-option">
            <div class="select-value">All</div>
            <span class="icon icon-down-dir-2"></span>
        </div>
        <div data-toggle="collapsed" class="options">
            <div class="option">All</div>
            <div class="option">Horror</div>
            <div class="option">Sci-fic</div>
            <div class="option">Adventure</div>
            <div class="option">Action</div>
        </div>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    color:#444;
    font-family:Arial,Helvetica,Sans-serif;
}
body{
    background-color:whitesmoke;
}

/** SELECT */
.select-container{
    width:300px;
    margin:1rem auto;
}
.select-label{
    text-transform:uppercase;
    font-size:14px;
    margin-bottom:10px;
}
.select{
    width:250px;
    position:relative;
}
.selected-option{
    display:flex;
    justify-content:space-between;
    background-color:white;
    border-radius:3px;
    border: .5px solid #ccc;
}
.icon,.select-value{
    padding:10px 15px;
}
.icon{
    border-left:.5px solid #ccc;
}
.select-value{
    padding:10px;
}
.options{
    position:absolute;
    background-color:white;
    width:100%;
    padding:15px 0;
    margin-top:5px;
    border: .5px solid #ccc;
    border-radius:3px;
}
.options[data-toggle="collapsed"]{
    display:none;
}
.option{
    padding:10px 15px;
    cursor:pointer;
}
.option:hover{
    background-color:whitesmoke;
}

JS

const selectedOption  = document.querySelector('.selected-option');
const selectValue     = document.querySelector('.select-value');
const optionContainer = document.querySelector('.options');
const optionList      = document.querySelectorAll('.option');

/** Toggle function */
const selectToggle = ()=>{

    if(optionContainer.dataset.toggle == 'collapsed'){
        optionContainer.dataset.toggle = '';
    }else{
        optionContainer.dataset.toggle = 'collapsed'
    }
}

/** When click on seleted-option */
selectedOption.addEventListener('click',selectToggle);

/** This function update select value */
const updateSelectValue = (option) => {
    selectValue.innerText = option.innerText;
}

optionList.forEach((option) => {
  option.addEventListener('click',(e) => {
      updateSelectValue(option)
      selectToggle()
  })  
})


/*
    fuente: https://www.youtube.com/watch?v=uYKDBH5_QmM 
    - Todo los créditos a su autor.
    - Sólo se modificó el ancho del select-container de 400px a 300px
    - para mejorar el centrado.
    
*/