custom-select-box-styling.css

select {
  appearance: none;
  width: 100%;
  transition-property: background, color, padding, margin;
  transition-duration: 150ms;
  outline-width: 0.125rem;
  outline-style: solid;
  outline-color: transparent;
  outline-offset: 0.125rem;
}

select:not([multiple=multiple]) {
  padding-right: calc(28px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1805.18'%3E%3Cpath fill='%23595d64' d='M461.6,643.4L10.9,79.9C-14.9,47.7,8,0,49.3,0h901.5c41.2,0,64.1,47.7,38.4,79.9L538.4,643.4 C518.7,668,481.3,668,461.6,643.4z' transform='rotate(180 500 902.59) translate(0 1143.28)'%3E%3C/path%3E%3Cpath fill='%23595d64' d='M461.6,643.4L10.9,79.9C-14.9,47.7,8,0,49.3,0h901.5c41.2,0,64.1,47.7,38.4,79.9L538.4,643.4 C518.7,668,481.3,668,461.6,643.4z' transform='translate(0 1143.28)'%3E%3C/path%3E%3C/svg%3E");
  background-position: right 7px top 50%;
  background-size: 0.5em;
  background-repeat: no-repeat;
}