Does my Select custom with Fontawesome not open when you click the arrow?

Question

I made that select customized using FontAwesome, but it doesn’t open when you click on the arrow.

Follows code referring to image above:

.x {
   width: 50%;
   background-color: #fefefe;
   border-radius: 5px;
   position: relative;
   font-family: sans-serif;
   cursor: pointer;
   border: 1px solid #ccc;
   box-shadow: 0 0 0 0 rgba(0,0,0,0);
   transition: all 250ms;
}
.x:focus-within{
   border: 1px solid #999;
   box-shadow: 0 0 0 5px rgba(0,0,0,0.15);
}
.x::after {
   font-family: FontAwesome;
   content: "\f063";
   position: absolute;
   right: 1rem;
   top: 50%;
   color: tomato;
   transform: translateY(-50%);
   transition: all 250ms;
}
.x:hover::after,
.x:focus-within::after {
   transform: translateY(-40%);
   color: red;
}
.y {
   all:unset;
   appearance: none;
   width: 100%;
   padding: 1rem;
   box-sizing: border-box;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Select padrão do user-agent<br>
<select name="" id="">
   <option value="">123</option>
   <option value="">abc</option>
</select>
<br>
<br>
Select customizado<br>
<div class="x">
   <select name="" class="y">
      <optgroup label="teste">
         <option value=""> 123</option>
         <option value=""> abc</option>
      </optgroup>
   </select>
</div>

Answer 1

Basically I added in the css of .x::after the directive pointer-events: none; to indicate that this element is not the mouse event target.

.x {
   width: 50%;
   background-color: #fefefe;
   border-radius: 5px;
   position: relative;
   font-family: sans-serif;
   cursor: pointer;
   border: 1px solid #ccc;
   box-shadow: 0 0 0 0 rgba(0,0,0,0);
   transition: all 250ms;
}
.x:focus-within{
   border: 1px solid #999;
   box-shadow: 0 0 0 5px rgba(0,0,0,0.15);
}
.x::after {
   font-family: FontAwesome;
   content: "\f063";
   position: absolute;
   right: 1rem;
   top: 50%;
   color: tomato;
   transform: translateY(-50%);
   transition: all 250ms;
pointer-events: none;
}
.x:hover::after,
.x:focus-within::after {
   transform: translateY(-40%);
   color: red;
}
.y {
   all:unset;
   appearance: none;
   width: 100%;
   padding: 1rem;
   box-sizing: border-box;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Select padrão do user-agent<br>
<select name="" id="">
   <option value="">123</option>
   <option value="">abc</option>
</select>
<br>
<br>
Select customizado<br>
<div class="x">
   <select name="" class="y">
      <optgroup label="teste">
         <option value=""> 123</option>
         <option value=""> abc</option>
      </optgroup>
   </select>
</div>

---

pointer-events

The CSS property pointer-events allows authors to control under any circumstance(if there is any) a particular graphical element may be the target of the mouse event.

Possible values:
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

• auto _{(default value)}
  The element behaves as if the property pointer-events were not specified.

• none
  In addition to indicating that this element is not the mouse event target, the value none instructs the mouse event to "pass" the element and everything that is "below" this element.