1

Good morning I am trying to pit list instead of dropping down I want it to drop up ?

<div class="select-form">
    <div class="dropup">
        <select class="dropup-content" id="select">
            <option name="search" value="Muscat"> Muscat</option>
            <option name="search" value="Ad Dakhiliyah">  Ad Dakhiliyah</option>
            <option name="search"value="Dhahirah">   Dhahirah   </option>
            <option name="search"value="Ash Sharqiyah">  Ash Sharqiyah   </option>
            <option name="search"value="Dhofar">  Dhofar    </option>
        </select>
    </div>
</div>
brombeer
  • 8,716
  • 5
  • 21
  • 27
Aly
  • 11
  • 2
  • 2
    Standard ` – Liftoff May 11 '22 at 06:36
  • Does this answer your question? [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) – Liftoff May 11 '22 at 06:37

1 Answers1

0

I have coded for hover you can do it for click events also by using javascript or jquery.

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropup {
  position: relative;
  display: inline-block;
  margin-top:150px;
}

.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  bottom: 50px;
  z-index: 1;
}

.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropup-content a:hover {background-color: #ccc}

.dropup:hover .dropup-content {
  display: block;
}

.dropup:hover .dropbtn {
  background-color: #2980B9;
}
<!DOCTYPE html>
<html>
  <body>
    <div class="dropup">
      <button class="dropbtn">Dropup</button>
      <div class="dropup-content">
        <a href="#">Muscat</a>
        <a href="#">Ad Dakhiliyah</a>
        <a href="#">Dhahirah</a>
        <a href="#">Ash Sharqiyah</a>
        <a href="#">Dhofar</a>
      </div>
    </div>
  </body>
</html>
Sumit Sharma
  • 1,192
  • 1
  • 4
  • 18