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

user_4947227 0
Viewed 23641

I'm trying to follow a design of a select dropdown-list where:

  • Padding: 0 10px 0 10px

However, the arrow is not being adjusted at all. It keeps sticking to the right end. Please see attached screenshot for reference.Front End Screenshot

You can also view my codes here

Is there a way to target the specific arrow and apply paddings to it? (Aiming to keep the same padding applied to the input text for both sides)

Thanks!

html-select
5 Answers

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

user_49472270

I used border-right property and it worked.

select {
  border-right: 16px solid transparent
}

The problem with wrapper element and ":after" is that, it does not toggle the "select" dropdown when you click on the arrow icon.

Working example: https://jsfiddle.net/asaad7/r8sx9m7e/

user_96542930

In addition to above answer you'd better add z-index to elements to place pseudo-element ::after "behind" the original select. Else nothing happends when user clicks the arrow.

select {
    z-index: 10;
    position: relative;
    background: transparent;
}

.select-wrapper::after {
    z-index: 0;
}
user_29822060

Solution without wrapper div

<select id="birthDate.dateYear" name="birthDate.dateYear" >
         <option value="">Year</option>
         
            <option value="2004">2004</option>
         
            <option value="2003">2003</option>
         
            <option value="2002">2002</option>
         
    </select>

CSS

select {
  -webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: #fafafa;
height: 45px;
width: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
background-position: 100%;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 0;
}

https://jsfiddle.net/aj4orwue/10/

user_42504080

I don't think we can add padding for the default arrow in <select> tag. But this is a simple workaround I found.

  • Hide the default arrow
  • Add an arrow as a background image to select, and position it however you want

Hiding the arrow:

/* Removing the default arrow */
select {
  -webkit-appearance: none;
  appearance: none;
}

Adding custom arrow:

/* Custom arrow */
select {
  background-image: url("/images/icons/caret-down-light.svg");
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: calc(100% - 8px) center;
}

The result would be something like this:
Dropdown showing the result

The caret down image I took, is from Google Icons, you can find it here

user_94925130
Related