0

Tenho o seguinte codigo para montar um select

input[type=text], input[type=datetime-local], input[type=number], select {
  width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}
<label for="modelo">Modelo</label>
<select id="modelo" class="modelo" name="modelo">
        <option value="g">ganho</option>
        <option value="d">desconto</option>
</select>

Estou tentando mover a posição da "seta" para o lado esquerdo através das propriedades padding ou margin mais não surte efeito, não gostaria de remover ela e ter que personalizar uma nova, quero manter essa padrão do navegador, mais como conseguir mover ela para os lados?

2
  • desta forma eu inverto o problema de lado, e mesmo assim a seta ainda continua colada na borda, desta maneira piora o quadro.
    – Patrique
    Commented 18/06/2020 às 19:02
  • Acho que entendi errado. Vc não quer a seta do lado esquerdo, que apenas "deslocar" ela mais pra esquerda :D
    – Sam
    Commented 18/06/2020 às 19:03

2 Respostas 2

2

Vc não precisa fazer uma seta personalizada, vc pode por o select em um conteinar personalizado no caso usei uma div, da mesma forma que vc personalizou o select

Veja as imagens

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Dessa forma vc da o padding no container, e não no select, e usa a propriedade :focus-within para tratar o focus

input[type=text], input[type=datetime-local], input[type=number], select {
  width: 100%;
  display: inline-block;
  border: none;
  outline: none;
}
div {
  width: 100%;
  padding: 12px 40px 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}
div:focus-within {
  box-shadow: 0px 0px 0px 2px blue;
}
<label for="modelo">Modelo</label>
<div>
  <select id="modelo" class="modelo" name="modelo">
    <option value="g">ganho</option>
    <option value="d">desconto</option>
  </select>
</div>

6
  • 1
    Agora entendi. Realmente e possivel fazer sem estilizar um icone. Agora aprendi, vou salvar esse codigo. Obrigado Commented 18/06/2020 às 19:07
  • 1
    @CmteCardeal na verdade é algo bem simples, é um select sem estilos dentro de uma div que parece um select :D, o pulo do gato mesmo é o :focus-within na div para manter a boa acessibilidade etc
    – hugocsl
    Commented 18/06/2020 às 19:10
  • 1
    pelo que entendi não é possivel mover o elemento seta né, teria que utilizar esse recurso, ele me incomoda um pouco acabo partindo para uma estilização maior doque imaginava, mas deu uma ideia clara esse método, obrigado pela ajuda.
    – Patrique
    Commented 18/06/2020 às 19:14
  • 1
    @hugocsl Sim!!! muito bom, e eu nem conhecia essa pseudo-class :focus-within, que realmente oferece uma boa UX. Aprendendo mais a cada dia :) Commented 18/06/2020 às 19:15
  • @Patrique vc não vai conseguir mudar esses estilos do user-agent do browser sem fazer gambiarra ou mesmo JS para "refazer o componente", então temos que ir dando esses jeitinhos, mas basicamente eu peguei os estilos que vc tinha colocado no select e coloquei na div em que o select está dentro :)
    – hugocsl
    Commented 18/06/2020 às 19:24
1

O select é o user-agent que renderiza, e isso varia em cada navegador. Mesmo colocando padding, a seta do select continua no mesmo lugar. O padding irá agir apenas no conteúdo interno dos options.

Você poderia ocultar a seta padrão com a propriedade -webkit-appearance: none; e criar uma seta com CSS usando os pseudos ::before e ::after e posicioná-los no lugar que você quer. Mas para isso você deve colocar o select dentro de uma div, que é onde serão criados os pseudos-elementos:

input[type=text], input[type=datetime-local], input[type=number], select {
   -webkit-appearance: none;
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 6px;
   box-sizing: border-box;
}

.select{
    position: relative;
}

.select::before, .select::after{
   content: "";
   position: absolute;
   top: 50%;
   border-top: 2px solid blue;
   width: 10px;
}

.select::before{
   right: 26px;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}

.select::after{
   right: 20px;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
}
<label for="modelo">Modelo</label>
<div class="select">
   <select id="modelo" class="modelo" name="modelo">
           <option value="g">ganho</option>
           <option value="d">desconto</option>
   </select>
</div>

Você pode mudar a cor da seta alterando o valor blue para a cor desejada. Por exemplo, para a cor preta você usa #000 ou black.

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 .