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

Question

I wanted to add padding to the right side of the arrow present in the HTML select how it currently looks.

I do not want to change the looks of the arrow. Just want a padding to the right side.

This is the html code -

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

I have tried adding padding to the rectangle class as well as the blood-type class but both doesn't work.

.blood-type{
    padding-right: 0.5rem; 
}

I have also tried this but the text arrow does not looks good. I can also use the arrow_drop_down icon if it is possible to use icon.

Please provide code examples, what did you try, what is the error. Check out: stackoverflow.com/help/how-to-ask and stackoverflow.com/help/minimal-reproducible-example — kmp
– kmp, Commented Sep 27, 2021 at 10:32
I agree with @kmp. Please add code example so we can asses what the problem is. — Dawood Khan Masood
– Dawood Khan Masood, Commented Sep 27, 2021 at 10:34
You should wrap select with div, and customize the div but not select — Yevhenii Shlapak
– Yevhenii Shlapak, Commented Sep 27, 2021 at 10:34
@AyushPatwari you also have to add the icon of arrow to .blood-type::after and put it where ever you want. — Yevhenii Shlapak
– Yevhenii Shlapak, Commented Sep 27, 2021 at 10:53

Dawood Khan Masood · Accepted Answer · 2021-09-28 05:36:44Z

3

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.

edited Sep 28, 2021 at 5:36

answered Sep 28, 2021 at 5:31

Dawood Khan Masood

3983 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayush Patwari Over a year ago

I have already tried this (mentioned in the question). The drop down looks weird to me. I can use this icon instead of normal text icon ("▼") if it is possible to do so.

Dawood Khan Masood Over a year ago

@AyushPatwari, sure, you will only need to change the 'content' tag inside .blood-type::after.

Saurabh Daware · Accepted Answer · 2024-11-16 17:33:10Z

There isn't any way to change padding directly but you can achieve what you're trying using border.

select {
  border: 0.5rem solid transparent
}

If you want to add border as well, you can create a wrapper around select and add border on that

* {
  box-sizing: border-box;
}

select {
  padding: 8px 0px;
  border: none;
  border-left: 12px solid transparent;
  /* This adds the width between arrow and text */
  border-right: 12px solid transparent;
  background-color: transparent;
}

.select-border {
  border: 1px solid #ddd;
  border-radius: 8px;
  display: inline-block;
}

<div class="select-border">
  <select>
    <option>apple</option>
    <option>orange</option>
    <option>banana</option>
  </select>
</div>

JohnP · Accepted Answer · 2021-09-27 12:01:32Z

0

If you want to change the spacing between the dropdown arrow and the border, you can't - it's a built-in browser control and may look completely different in different browsers. The only option is to write your own element styling from scratch, which is almost certainly not worth the trouble. Generally, try not to get too hung up on controlling every aspect of your user's experience - there's a lot to be said for consistency in controls across different websites!

answered Sep 27, 2021 at 12:01

JohnP

1,3098 silver badges25 bronze badges

3 Comments

kmp Over a year ago

In reality a custom arrow isn't a big deal. It takes a bit of coding but if it makes your design more readable, more fluid, it's certainly worth it

Ayush Patwari Over a year ago

I think I am willing to go the extra mile. Can you guys provide any good resources?

JohnP Over a year ago

There's loads of tutorials out there - W3schools have one, for example.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related