CODEWITHSUNDEEP
htmlcssselect
qadenza
qadenza

Reputation: 9293

how to set padding on select tag

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>

Upvotes: 0

Views: 241

Answers (1)

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4469

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 */
  }
}

Upvotes: 1

Related Questions