选择Chrome额外填充

Question

我在chrome桌面上遇到选择问题。我似乎无法删除chrome上的额外填充：

我的HTML：

<select class="demo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我的CSS：

.demo { 
    border: solid black 1px;
        -webkit-appearance: none;
        height: 30px;
        padding: 0 0px 0 0px;
        width: 100%; 
    }

我似乎无法摆脱左侧的额外填充。

有人可以帮忙解决一下吗？

由于