向带有选择和标签的 div 添加箭头

Question

我正在使用自己的样式创建一个选择。它应该有一个标签和它自己的箭头。我是这样建造的

.signupselect{


    background: url(https://i.ibb.co/fCsFTVL/icn-dropdown-chevron.png) no-repeat right;
    -webkit-appearance: none;
    background-position-x: 265px;
    background-position-y:20px;

}

.signupselect select {
  -webkit-appearance: none;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="bg-red-300 h-64 w-1/3 relative rounded-lg px-4 py-2 mb-4 signupselect">
  <select type="text" class=" focus:outline-none w-full bg-jilogingrey absolute bottom-0 mb-2 px-4 left-0">
  </select>
  <label class="absolute left-0 ml-4 text-jibuttonBlue">{{label}}</label>
</div>

如何添加要在选择前显示的背景图片？

Answer 1

这是你想要的吗？

.signupselect {
  background: url(https://i.ibb.co/fCsFTVL/icn-dropdown-chevron.png) no-repeat;
  width: 15px;
  height: 8px;
  background-size: contain;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex items-center relative py-2 px-2 bg-red-300 w-1/3 rounded">
  <select type="text" class="focus:outline-none w-full bg-transparent text-transparent absolute top-0 bottom-0 left-0 right-0">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>

  <label class="flex-1 text-jibuttonBlue">Label</label>

  <div class="signupselect ml-2" />
</div>

Answer 2

这样的？

.signupselect{


    background: url(https://i.ibb.co/fCsFTVL/icn-dropdown-chevron.png) no-repeat right;
   
    background-color: #fff;

}

.signupselect select {
  -webkit-appearance: none;
  background: transparent;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="bg-red-300 h-64 w-1/3 relative rounded-lg px-4 py-2 mb-4 ">
  <div class="signupselect absolute bottom-0 left-0 right-0">
  <select type="text" class=" focus:outline-none w-full bg-jilogingrey mb-2 px-4">
  </select></div>
  
  <label class="absolute left-0 ml-4 text-jibuttonBlue">{{label}}</label>
</div>