how to set padding on select tag

Question

why there is no right padding 14px on select tag?
I'm on Chrome - last version

.sel{
    display:block;
    margin:0 auto;
    padding:0 14px;
    font-weight:500;
    height:31px;
    background:#007399;
    color:white;
  border-radius:25px;
  outline:none;
}

<select class='sel'>
<option value = 'lorem'>LOREM</option>
<option value = 'ipsum'>IPSUM</option>
<option value = 'dolor'>DOLOR</option>
<option value = 'sit'>SIT</option>
</select>

The padding seems to work, even in Chrome. Which is your expectation? — Emanuele Scarabattoli, Nov 28 '20 at 15:08
@EmanueleScarabattoli, there is no 14px right from down arrow — qadenza, Nov 28 '20 at 15:13
Please add this issue in the question, it is not clear the way you asked. By the way I will answer to fix your issue. — Emanuele Scarabattoli, Nov 28 '20 at 15:19
build your own arrow for this: https://stackoverflow.com/a/54207259/8620333 — Temani Afif, Nov 28 '20 at 19:44

score 1 · Answer 1 · answered Nov 28 '20 at 15:24

1

If you want to get an extra padding on the right of the select drop-down arrow, you need to wrap your select in a div, in this way you can have an extra padding also for the arrow. For example:

<div class="select-container">
  <select>
    <option value = 'lorem'>LOREM</option>
    <option value = 'ipsum'>IPSUM</option>
  <select>
</div>

And then, in your SCSS:

.select-container {
  padding: 0 14px;
  select {
    border: none;
    /* rest of your rules */
  }
}

answered Nov 28 '20 at 15:24

Emanuele Scarabattoli

4,103
1
12
21

thanks , it works. btw I think my question is perfectly clear - I need the padding on `select` tag and not on any additional wraper – qadenza Nov 28 '20 at 15:30

how to set padding on select tag

1 Answers1