Padding in Select Boxes

Text Padding in Select Boxes

Unfortunately, this extra whitespace is added by the browser's rendering engine. Form element rendering is inconsistent across browsers, and in this case is not determined by CSS.

Take a look at this article from Mozilla explaining some ways to mitigate select box incosistency, then you might read this article from Smashing Magazine about styling form elements (be sure to check out the comments and the problems people have had with selects).

Edit 2020: I stumbled across this article from Chris Coyer at CSS-Tricks that appears to show some styling that you can apply to select elements that may help some folks out. It appears overriding the browser's default styling allows you a little more freedom than I was aware of when I posted this answer several years go, according to Liliana Brissos on Team Treehouse.

How to add padding to the default arrow in a select dropdown list?

For those who have the same question, I found a work around how to style the default select "arrow" which is by replacing it with generated content.

Step 1: Hiding the default arrow

select {
  -webkit-appearance: none;
  appearance: none;
}

Step 2: Create extra wrapper around select, because ::before/::after doesn't work this way.

<div class="select-wrapper"><select id="select" name="select">
  <option>Banana</option>
  <option>Cherry</option>
  <option>Lemon</option>
</select></div>

Step 3: Apply generated content

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 1rem;
  top: 6px;
  right: 10px;
  position: absolute;
}

Codes above originated from
Advanced form styling | MDN

How to add padding to the arrow present in html select?

Perhaps something like this could help:

CSS:

select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
}
.blood-type {
    position: relative;
    border: 1px solid black;
    border-radius: 2px;
    padding: 5px;
}
.blood-type::after {
    content: "▼";
    font-size: 1rem;
    right: 10px;
    position: absolute;
}
.rectangle {
    width: 100%;
}

HTML:

<div class="blood-type">
    <select class="rectangle">
        <option value="" disabled selected>Select One</option>
        <option *ngFor="let bg of bgList" [value]="bg.id">{{bg.name}}</option>
    </select>
</div>

Preview:

Let me know if you have any questions.

remove space in select box

It has something todo with the browser rendering itself. See this answer on same question for more informations: Text Padding in Select Boxes

In summary, you should not do this or not common.

---

Related Topics