Add padding to the right of select drop down arrow (chrome)

Question

The client would like rounded corners on the select box, however now the drop down arrow is very close to the edge. How does one add some padding. It pretty much only has to support chrome.

I thought of making the right border radii zero, then use ::after to add some extra background with the radius. However I can't use select::after, since Chrome does not support that.

And chrome does not have any pseduo elements from styling the select.

So I think it's not possible, but is worth asking here if anyone knows some clever tricks, that do not use background url images, since due to security issues I cant apply them.

Heres an example where you can see how close the dropdown arrow is to the edge:

select {
  background: #444;
  color:white;
  border-radius:16px;
  height:32px;
  padding: 8px 16px;
}

<select>
  <option value="1">The one and only</option>
</select>

Answer 1

I suggest you use an image icon like the below code:

:root::-webkit-media-controls-panel,
select {
    -webkit-appearance: textfield;
    background-image: url(down-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-color: white;
}

Also, You add a class before the "select" tag.

Answer 2

Please use the below code, I am sure your issue will be resolved.

var x, i, j, l, ll, selElmnt, a, b, c;
    
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
    
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
    
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        /*for each option in the original select element,
        create a new DIV that will act as an option item:*/
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
    
            var y, i, k, s, h, sl, yl;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            sl = s.length;
            h = this.parentNode.previousSibling;
            for (i = 0; i < sl; i++) {
              if (s.options[i].innerHTML == this.innerHTML) {
                s.selectedIndex = i;
                h.innerHTML = this.innerHTML;
                y = this.parentNode.getElementsByClassName("same-as-selected");
                yl = y.length;
                for (k = 0; k < yl; k++) {
                  y[k].removeAttribute("class");
                }
                this.setAttribute("class", "same-as-selected");
                break;
              }
            }
            h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function(e) {
    
          e.stopPropagation();
          closeAllSelect(this);
          this.nextSibling.classList.toggle("select-hide");
          this.classList.toggle("select-arrow-active");
        });
    }
    function closeAllSelect(elmnt) {
    
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }
    
    document.addEventListener("click", closeAllSelect);

 .custom-select {
          position: relative;
          font-family: Arial;
        }
        
        .custom-select select {
          display: none; /*hide original SELECT element:*/
        }
        
        .select-selected {
          background-color: DodgerBlue;
        }
        
        
        .select-selected:after {
          position: absolute;
          content: "";
          top: 14px;
          right: 10px;
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-color: #fff transparent transparent transparent;
        }
        
        
        .select-selected.select-arrow-active:after {
          border-color: transparent transparent #fff transparent;
          top: 7px;
        }
        
        .select-items div,.select-selected {
          color: #ffffff;
          padding: 8px 16px;
          border: 1px solid transparent;
          border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
          cursor: pointer;
          user-select: none;
        }
        
        
        .select-items {
          position: absolute;
          background-color: DodgerBlue;
          top: 100%;
          left: 0;
          right: 0;
          z-index: 99;
        }
        
        .select-hide {
          display: none;
        }
        
        .select-items div:hover, .same-as-selected {
          background-color: rgba(0, 0, 0, 0.1);
        }

<div class="custom-select" style="width:200px;">
      <select>
        <option value="0">Select car:</option>
        <option value="1">Audi</option>
        <option value="2">BMW</option>
        <option value="3">Citroen</option>
        <option value="4">Ford</option>
        <option value="5">Honda</option>
        <option value="6">Jaguar</option>
        <option value="7">Land Rover</option>
        <option value="8">Mercedes</option>
        <option value="9">Mini</option>
        <option value="10">Nissan</option>
        <option value="11">Toyota</option>
        <option value="12">Volvo</option>
      </select>
    </div>