[Vuejs]-Select box with background image?

by

1👍

✅

Simply use a div and the image as background image. and insert the select boxes with an absolute positioning.
However this will be a mess for full responsivness and therefor a complete CSS + HTML approach without an image would be way better. For that however you need at least some kind of coding skills.

.select {
  background-image: url(https://i.hizliresim.com/2XxBuE.png);
  width: 419px;
  height: 160px;
  position: relative;
}

#selectbox_a {
  position: absolute;
  left: 160px;
  top: 115px;
}

#selectbox_i {
  position: absolute;
  left: 260px;
  top: 115px;
}
<div class="select">
  <select id='selectbox_a'>
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select>
  <select id='selectbox_i'>
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select>
</div>

0👍

You can define your tag inside of a div which have background image and position your select anywhere.

.bg {
  background: url(https://i.hizliresim.com/2XxBuE.png) no-repeat;
  width: 100vw;
  height: 100vh;
  position: relative;
}
     
#selectbox {
  position:absolute;
  left: 50%;
  top:50%;
}
<div class="bg">
  <select id="selectbox">
    <option>30</option>
    <option>40</option>
    <option>50</option>
  </select> 
</div>

Leave a comment