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

Question

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!

Drawbar

Hello, please share your code so I can help you – Chickadee

@Nikasmusicandgaming Hi! I have added respective links above, thanks for checking it out. – Drawbar

Add the code so we can tweak it for you wherever necessary – Toed

Answer 1

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

Drawbar

remember to add pointer-events: none; to the select to allow click on select at that area. – Survey

@Survey nice comment! Worked indeed. – Candidate

Simple and elegant! Worked like a charm :) – Cordiality

I feel like this is the "correct" method but the top answer is the "best" method. – Waverly

Answer 2

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/

Sanjak

Good suggestion! The only downside is that this breaks any existing border around your <select> element. However, I got around that by simply wrapping my <select> in a <div>, and moving my styled border there instead! – Mikelmikell

I don't understand why this solution has so many upvotes, making the border transparent makes this looks ugly and is just unusable. – Meany

I think is amazing suggestion but didn't work in my case because I have border color and right side looking more wider – Highwayman

If you have a border to your select tag, and using this makes your right border transparent, you can use CSS outline property along with this. Suppose you have a red bordered select tag and you want red border to it with some padding for its icon on the right side, use this border-right: 16px solid transparent; outline: 2px solid red; – Jeromejeromy

I like this solution as it isn't dependent on browser. – Handoff

Thank you!! This is exactly what I was looking for! – Outride

Answer 3

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/

Survey

Answer 4

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:

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

Herb

Answer 5

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;
}

Valentin