CODEWITHSUNDEEP
csshtml-select
KvnG.
KvnG.

Reputation: 895

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

I'm trying to follow a design of a <select> dropdown menu with padding: 0 10px 0 10px

However, the arrow is not being adjusted at all. It keeps sticking to the right end:

Front End Screenshot

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)

Upvotes: 46

Views: 78976

Answers (6)

Code on the Rocks
Code on the Rocks

Reputation: 17794

Since I exclusively use Tailwind, here's how to implement the accepted answer with Tailwind:

<select className="border-r-[12px] border-background-dark bg-background-dark">
...
</select>

Upvotes: 0

keidakida
keidakida

Reputation: 741

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

Upvotes: 6

asad makhdoom
asad makhdoom

Reputation: 778

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/

Upvotes: 72

funky-nd
funky-nd

Reputation: 709

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/

Upvotes: 13

Movs
Movs

Reputation: 381

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

Upvotes: 1

KvnG.
KvnG.

Reputation: 895

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

Upvotes: 37

Related Questions