html - Select option resize when i zoom out

Question

I have a problem with HTML selections because when I shrink the page, the selections are as if they get bigger.

Page Zoom: 100%

Page Zoom: 40%

It seems that the select icon is getting bigger and bigger (the one behind my custom icon) and I wish that didn't happen because the numbers are hidden, what can I do?

Code:

    .quantityDiv {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 15px;
        width: 50px;
    }
    
    .quantityDiv p {
        padding-bottom: 0px;
        padding-right: 5px;
    }
    
    .quantityDiv .customSelectCat select{
        font-size: 16px;
        padding: 2px;
        min-width: 50px;
        max-width: 50px;
    }
    
    .quantityDiv .customArrowCat::before {
        border-left: 6.4px solid transparent;
        border-right: 6.4px solid transparent;
        border-bottom: 6.4px solid rgb(255, 255, 255);
        top: 32%;
    }
    
    .quantityDiv .customArrowCat::after {
        border-left: 6.4px solid transparent;
        border-right: 6.4px solid transparent;
        border-top: 6.4px solid rgb(255, 255, 255);
        top: 68%;
    }
    
    .quantityDiv .customArrowCat {
        width: 24px;
        display: inline;
        background: #3b3c47;
    }

   <div class="quantityDiv">
        <p>Quantità: </p>
        <div class="customSelectCat">
            <select id="quantity0"></select>
            <span class="customArrowCat"></span>
        </div>
    </div>

question from:https://stackoverflow.com/questions/65881918/select-option-resize-when-i-zoom-out

Answer 1

Waitting for answers