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

user_16237217 0
Viewed 2050

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.

html-select css html
2 Answers

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:

enter image description here

Let me know if you have any questions.

user_67487940

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!

user_114587400
Related