Question

<div class = "select-color">
  <h6>Colours (30 available)</h6>
       <select class="select-dropdown formcontrol" name="colour" id="colour">
         <option value="choose" disabled selected="selected">Select colour</option>
         <option class="colourList" value="{{this}}">{{this}}</option>
       </select>
  <img src="images/selector.png" class="spin">
</div>

这是我的html，这是它的css

.select-dropdown {
     cursor: pointer; font-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       /* remove default arrow */
    padding-left: 15px;
    border-radius: 13px;
    background: transparent;
    background: url(images/selector.png) 96% / 15% no-repeat;
}

正如您所见，我正在尝试将selector.png图像添加到选择器标记的右侧，但它并不像我预期的那样工作。我已经看到其他人已经完成了背景，但由于某些未知的原因，它对我不起作用。

this is how it looks like

Answer 1

您需要在父元素上使用position:relative。然后在position:absolute上使用spin在父select-color内根据需要绝对定位。

您需要的是：

＆＃13;

 .select-color{
  position:relative;
 }
 /*added above*/
 
 .select-dropdown {
  cursor: pointer;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* remove default arrow */
  padding-left: 15px;
  border-radius: 13px;
  background: transparent;
  background: url(images/selector.png) 96% / 15% no-repeat;
  width:200px;/*added this. remove it.*/
}

/*added below*/
.spin{
  width:15px;
  position:relative;
  left:-30px;/*adjust accordingly*/
}

＆＃13;

<div class="select-color">
  <h6>Colours (30 available)</h6>
  <select class="select-dropdown formcontrol" name="colour" id="colour">
         <option value="choose" disabled selected="selected">Select colour</option>
         <option class="colourList" value="{{this}}">{{this}}</option>
       </select>
  <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/10897-200.png" class="spin">
</div>

＆＃13;

将图像添加到选择标记

1 个答案: