How to make a select tag show two arrows [closed]

Question

How to make a select tag show two arrows [closed]

Navigation

#1 by (1 votes)

0

Hi, I have a select tag which shows me city men, however I want the select tagtq to show me two arrows something like this:

How can I do that in the css?

html css

asked by Gerardo Gutiérrez 12.06.2018 в 19:18

source

1 answer

App closes when you exit and re-enter the Fragment that Google Map Geolocation shows me how can I validate input text without using button with PHP, MySQL

score 1 · Accepted Answer

You could do something with the styles, modifying the appearance and putting an image as your desired arrow.

.form-select {
  width: 200px;
}

.form-select select {
  width: 100%;
  height: 30px;
  margin: 8px 0;
  border: 1px solid #efefef;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  background: #fff url('https://www.freeiconspng.com/uploads/arrow-up-icon-23.png') no-repeat;
  background-size: 15px;
  background-position:  right 10px center;
  font-family: 'Arial';
  padding-left: 15px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

<div class="form-select">
  <select name="select">
    <option value="1">Mi valor 1</option>
    <option value="2">Mi valor 2</option>
    <option value="3">Mi valor 3</option>
    <option value="4">Mi valor 4</option>
    <option value="5">Mi valor 5</option>
    <option value="6">Mi valor 6</option>
  </select>
</div>