how to margin or padding in option select

Question

how to margin or padding option select

I used  

<select class="select">
   <option value="100"></option>
   <option value="250">$593</option>
   <option value="500">$1125</option>
   <option value="1000">$2125</option>
   <option value="2000">$3750</option>
   <option value="3000">$5250</option>
   <option value="5000">$6250</option>
</select>

What plugin are you using for the select? That will help lots in finding a good solution for you. Also please include what you have tried — Carsten Løvbo Andersen, May 20 '22 at 09:13
@CarstenLøvboAndersen this is one of the most asked questions on SO, why would you re-opened the question ?? — dippas, May 20 '22 at 09:43
depends on the lib to show the select, just set css style "select { text-align:right; } if it is native browser select tag — Dee, May 20 '22 at 09:46
@dippas while yes it's not possible to style a normal select/option, but from the image it's clearly a plugin/library the OP is using. So if we got the name of that It would maybe be possible to actually assist here. — Carsten Løvbo Andersen, May 20 '22 at 10:17
@PhungThuan Please inform us about what plugin/library you are using — Carsten Løvbo Andersen, May 20 '22 at 10:17
I don't know if my answer fits your question. if not please explain more to try to help you out. — Fadi, May 20 '22 at 11:38

score -1 · Answer 1 · answered May 20 '22 at 10:06

Simple solution with manipulating in padding, indent and margin.

select {
    margin: 6px;
    font: 16px Arial;
}
select {
    width: 262px;
    height: 32px;
    padding: 4px;
    line-height: 32px;
    text-indent: 4px;
    cursor: pointer;
}

<select class="select">
   <option value="100"></option>
   <option value="250">$593</option>
   <option value="500">$1125</option>
   <option value="1000">$2125</option>
   <option value="2000">$3750</option>
   <option value="3000">$5250</option>
   <option value="5000">$6250</option>
</select>

how to margin or padding in option select

1 Answers1