Position of arrow in select

Question

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?

Answer 1

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

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>

Answer 2

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.