0

I have a select box and I wanna add app logos to the left of the select box items.. I'm waiting your helps <3

<select class="selectdiv2" id="selection2" name="platform" required>
  <option value="">-- please select a platform --</option>
  <option value="WhatsApp">WhatsApp</option>
  <option value="Instagram">Instagram</option>
</select>
Behemoth
  • 5,389
  • 4
  • 16
  • 40
Zafer İnci
  • 9
  • 5
  • 1
    Does this answer your question? [How to add images in select list?](https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list) – Pinguin895 May 13 '21 at 22:58

1 Answers1

0

I found something like this when it comes to HTML / CSS solution. Other solutions require JavaScript knowledge.

.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }
  
        .dropdown {
            position: relative;
            display: inline-block;
        }
  
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 
                0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
  
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
  
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }
  
        .dropdown:hover .dropdown-content {
            display: block;
        }
  
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
 <div class="dropdown">
            <button class="dropbtn">
                Country Flags
            </button>
              
            <div class="dropdown-content">
                <a href="#">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
                    width="20" height="15"> India</a>
  
                <a href="#">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
                    width="20" height="15"> USA</a>
                <a href="#">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
                    width="20" height="15"> England</a>
                <a href="#">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
                    width="20" height="15"> Brazil<a/a>
            </div>
        </div>
KryBor_BK
  • 22
  • 6