.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none; /* Remove default styling on Safari */
    -moz-appearance: none; /* Remove default styling on Firefox */
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%204%205"><path%20fill="none"%20stroke="black"%20stroke-width="1"%20d="M0%201l2%202l2-2"/></svg>'); /* Custom arrow icon */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 8px 10px;
    padding-right: 30px; /* Adjust based on the size of the custom arrow */
}

select::-ms-expand {
    display: none; /* Remove the default arrow on IE */
}