Question

嗨我正在设计一个crossbrowser选择在浏览器chrome，IE，ff和safari中使用相同的下拉设计。这很好用！我使用了以下代码：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

箭头位于正确的位置（右中心）并且尺寸正确，但是只要选择的宽度足够大。当选择不够长时，图标在文本中如下：

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

谢谢！

Answer 1

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

＆＃13;

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;
  
}

＆＃13;

<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>

＆＃13;

在选择

1 个答案: