在选择之后添加 svg-icon（箭头）答案

【问题标题】：Add svg-icon (arrow) in after of select在选择之后添加 svg-icon（箭头）
【发布时间】：2016-05-20 05:50:24
【问题描述】：

您好，我正在设计一个跨浏览器选择，以便在浏览器 chrome、IE、ff 和 safari 中拥有与我的下拉菜单相同的设计。这很好用！我使用了以下代码：

label {
  font-family: Arial;
}

select {
  transition: border-color ease-in-out 0.15s;
  background: transparent;
  border: 1px solid $BORDER_COLOR;
  outline: 0;
  padding: 5px;

  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;

  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
}

<body>
  <label>City</label>
  <select>
    <option>Zurich</option>
    <option>Vienna</option>
    <option>Berlin</option>
  </select>
</body>

我现在想念的是一个箭头图标，它显示这是一个下拉菜单（像往常一样）。我还想添加我的服装图标（svg）。我用这个 css 试过了：

background: url("arrow_down_grey.svg") no-repeat center right;

箭头位于正确的位置（右中心）并且大小正确，但前提是选择的宽度足够大。 When the select is not long enough, the icon is within the text like this:

我现在的想法是将它添加到我选择的伪“之后”中。我在互联网上找到的每个教程都没有真正奏效。有人能帮我吗？

谢谢！

【问题讨论】：

这个怎么样？ stackoverflow.com/questions/31531865/…
@BigRedDog 您好，感谢您的回答。这是我在之后搜索的解决方案 - 谢谢。检查下面哈利的回答。它比之后容易得多并且工作正常。 :)

标签： css background css-selectors

【解决方案1】：

你可以设置元素的padding-right等于图片的宽度。如果这样做，元素的内容将在图像开始的位置之前被截断（如下面的 sn-p）。

label {
  font-family: Arial;
}

select {
  transition: border-color ease-in-out 0.15s;
  background: transparent;
  border: 1px solid $BORDER_COLOR;
  outline: 0;
  padding: 5px 25px 5px 5px;

  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;

  -webkit-appearance: none;
  -moz-appearance: radio-container;
  appearance: none;
  background: url("http://i.stack.imgur.com/RGBNj.png") no-repeat center right;
  
}

<body>
  <label>City</label>
  <select>
    <option>Zurich</option>
    <option>Vienna</option>
    <option>Berlin</option>
  </select>
  <br><br>
  <label>Country</label>
  <select>
    <option>United States of America</option>
    <option>India</option>
    <option>England</option>
  </select>
</body>

【讨论】：

您好，感谢您的快速答复！这比“之后”要容易得多，而且效果很好，谢谢您，先生，祝您有美好的一天！ :) 你会得到正确答案的分数。 ;)