Position of arrow in select

Asked

Viewed 460 times

0

I have the following code to mount a 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>

I’m trying to move the position of the "arrow" to the left side through the padding or margin properties but no effect, I would not like to remove it and have to customize a new one, I want to keep this browser pattern, more like being able to move it sideways?

css

  • in this way I reverse the problem sideways, and yet the arrow still remains glued to the edge, in this way worsens the picture.

  • I think I got it wrong. You don’t want the arrow on the left side, you just "shift" it more to the left :D

2 answers

2

You don’t need to make a custom arrow, you can select it in a conteinar customized in case I used a div, the same way you customized the select

See the images

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

That way you give the padding in the container, and not in the select, and use the property :focus-within to treat 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>

  • 1

    Now I understand. It is really possible to do without styling an icon. Now I have learned, I will save this code. Thank you

  • 1

    @Cmtecardeal is actually something very simple, it is a select without styles within a div that looks like a select :D, the cat jump itself is the :focus-within in div to maintain good accessibility etc

  • 1

    from what I understood it is not possible to move the arrow element right, I would have to use this resource, it bothers me a little I end up leaving for a more stylization than I imagined, but gave a clear idea this method, thanks for the help.

  • 1

    @hugocsl Yes!!! very good, and I didn’t even know this pseudo-class :focus-within, that really offers a good UX. Learning more every day :)

  • @Patrique vc will not be able to change these styles of the browser user-agent without doing gambiarra or even JS to "redo the component", so we have to give these little ways, but basically I took the styles you had put in select and put in the div in which select is inside :)

  • @hugocsl was what I imagined, but in doubt I asked rs, thanks for the help.

Show 1 more comment

1


select is the user-agent it renders, and this varies in each browser. Even by placing padding, the select arrow continues in the same place. Padding will only act on the internal content of options.

You could hide the default arrow with the property -webkit-appearance: none; and create a CSS arrow using pseudos ::before and ::after and position them in the place you want. But for this you must place the select within a div, which is where the pseudo-elements will be created:

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>

You can change the color of the arrow by changing the value blue for the desired color. For example, for the black color you use #000 or black.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.