3

Fiz esse select customizado usando FontAwesome, porem ele não abre quando clica na setinha.

inserir a descrição da imagem aqui

Segue código referente a imagem acima:

.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>

3
  • Acho que não tem jeito, porque a seta não faz parte do select. Nem com JS se consegue (pelo menos não conheço) abrir um select, a não ser pela ação direta do usuário.
    – Sam
    Commented 17/01/2019 às 12:17
  • @Sam realmente forçar a abertura acho que não é possível... Acredito que uma solução é como o amigo fez na resposta... ou então vc coloca o z-index do select maior que o do container. Parece que funciona tb, dessa forma vc "acha" que está clicando na seta, mas está clicando no select mesmo :D
    – hugocsl
    Commented 17/01/2019 às 13:38
  • Realmente, ficou mt bom da forma na resposta.
    – Sam
    Commented 17/01/2019 às 13:42

1 Resposta 1

4

Basicamente eu adicionei no css do .x::after a diretiva pointer-events: none; para indicar que este elemento não é o alvo de evento do mouse.

.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

A propriedade CSS pointer-events permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.

Valores possíveis:
auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

  • auto (valor padrão)
    O elemento se comporta como se a propriedade pointer-events não fosse especificada.

  • none
    Além de indicar que este elemento não é o alvo do evento do mouse, o valor none instrui o evento do mouse a "passar" o elemento e tudo que está "abaixo" deste elemento.

1
  • 1
    Acredito que essa é a solução!
    – hugocsl
    Commented 17/01/2019 às 13:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .