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

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.

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.