stylizing a ul that will serve as a select

Question

I’m studying here, more to learn a little even, and I’m trying to develop a select option with a ul starting from the select.

The population of ul is already correct.

$(".selectOption").on("click", function() {
  $(".opcoes").css("overflow", "visible");
}); 

$(".opcoes li").on("click", function() {
  $(".opcoes").css("overflow", "hidden");
}); 

$("#select > option").each(function() {
  $(".opcoes").append("<li id="+this.value+">"+this.text+"</li>");
});

@charset "utf-8";
/* CSS Document */
    
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

body {
  margin: 0 auto;
  width: 800px;
}

#select {
  display: none;
}

.selectOption:after {
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 50px;
  background-image: url(_imgs/setaBaixo.jpg);
}

.selectOption, .opcoes {
  width: 200px;
  height: 35px;
  background-color: rgba(0,0,0,0.2);
}

.opcoes {
  overflow: hidden;
  list-style: none;
  z-index: -1;
}

.opcoes li {
  width: 100%;
  height: 31px;
  line-height: 31px;
  cursor: pointer;
  padding: 2px;
  color: rgb(0,0,0); /* alterado para visualizar melhor */
  background-color: rgb(240,240,240);
  border-bottom: rgba(0,0,0,.1) 1px solid;
}

.opcoes li:active {
  color: rgb(255,255,255);
  background-color: rgba(0,0,0, .1);
}

.opcoes li:hover + .selectOption:after {
  color: rgba(0,0,0, .1);
  background-color: rgb(255,255,255);
  background-image: url(_imgs/setaCima.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="select" id="select">
  <option value="1">um</option>
  <option value="2">dois</option>
  <option value="3">Tres</option>
</select>

<div class="selectOption">
  <ul class="opcoes">
     <li id="">Escolha a opção abaixo</li>
  </ul>
</div>

My goal now is to make the clicar in a li, to ul retracts, that is, back to overflow:hidden. But what I did didn’t solve.

Another difficulty I’m having is to put the figure of a arrow in the top right of ul (new select).

I thank anyone who can help

Answer 1

Your first Istener on .selectOption should be re-viewing the options whenever you click on any option. This happens because the events propagate to the parent elements. To prevent this from happening, try using the function event.stopPropagation() and event.preventDefault() in the System that hides options:

// lembre de receber o argumento 'event'
$(".opcoes li").on("click", function(event) {
    $(".opcoes").css("overflow", "hidden");
    event.stopPropagation();
    event.preventDefault();
});

On the arrow, it is necessary to use the property content when using :after or :before:

.selectOption:after {
    content: "";
    position: absolute;
    display: block;
    ...
    background-image: url(_imgs/setaBaixo.jpg);
}