Question

我想样式化选择输入。我从网址添加了自己的箭头。我在选择输入时更改了背景。我有问题，因为箭头太靠近边缘了。我想从边缘稍微改变背景，但是我不知道该怎么做。也许您有更好的方法来解决此问题。现在看起来像这样：https://imgur.com/a/IKC8QsZ。

<select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  appearance:none;
  background: url("../assets/icon-dropdown-active.svg") no-repeat right white;
}

Answer 1

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://image.flaticon.com/icons/svg/60/60995.svg) 96% / 15% no-repeat #eee;
}

/* CAUTION: IE hackery ahead */
select::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background:none\9;
        padding: 5px\9;
    } 
}

<select>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

Answer 2

如果要更改图像的大小，请使用background-size属性

如何转换背景图片

2 个答案: