CODEWITHSUNDEEP
htmlcss
user10927965
user10927965

Reputation:

How to display a fixed number of options in the drop down box?

I am trying to implement a list of currencies in a dropdown box.I want to show only 10 options in the drop down box

I have tried setting the size attribute of select but it had no arrow to drop the box, it just made 10 elements visible all the time.

here is the html code

<div class="container jumbotron h1">
    <h1 class="cen">Real Time Currency Convertor</h1>
</div>
<form class="container" action="curr.php" method="POST">
    <div class="div1">
        <div class="cen">
            <br>VALUE :
              <input type="number" name="val" min="1" value="1" class="size">
        </div>
        <br>
        <div class="cen">
            FROM:
            <select name="from">
              <option value='USD'>American Samoa(US Dollar)</option>
              <option value='XCD'>Anguilla(East Caribbean Dollar)</option>
              <option value='ARS'>Argentina(Argentine Peso)</option>
              <option value='AWG'>Aruba(Aruban Florin)</option>
              <option value='AUD'>Australia(Australian Dollar)</option>
              <option value='AZN'>Azerbaijan(Azerbaijan Manat)</option>
              <option value='BSD'>Bahamas(Bahamian Dollar)</option>
              <option value='BHD'>Bahrain(Bahraini Dinar)</option>
              //A long list of currencies cut short 
              <option value='XPF'>Wallis and Futuna Islands(CFP Franc)</option>
              <option value='MAD'>Western Sahara(Moroccan Dirham)</option>
              <option value='YER'>Yemen(Yemeni Rial)</option>
              <option value='ZMW'>Zambia(Zambian Kwacha)</option>
              <option value='ZWD'>Zimbabwe(Zimbabwe Dollar)</option>
            </select>
        </div>
        <div class="cen">
            <button type="submit" name="sub" id="button" >SUBMIT</button>
            <br><br>
        </div>
    </div>
</form>

here is the css file.

.cen{
  text-align: center;
}
.h1{
  background-color: rgba(250, 250, 250,0.5);
  border-radius: 20px;
}
input[type=number]{
    width: 500px;
    border-radius: 20px;
}
select{
    width: 490px;
    border-radius: 20px;
}

#button {
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:40px;
  background: #fff;
  border: 2px solid rgb(100, 100, 100);
  color:rgb(100, 100, 100);
  letter-spacing:1px;
  text-shadow:0;
  font:{
    size:12px;
    weight:bold;
  }
}
#button:hover{
  outline:none;
  height: 40px;
  text-align: center;
  width: 130px;
  border-radius:40px;
  background: rgb(175, 175, 175);
  border: 2px solid white;
  color:white;
  letter-spacing:1px;
  text-shadow:0;
  font:{
    size:12px;
    weight:bold;
  }
}
.div1{
  background-color: rgba(250, 250, 250,0.5);
  border-radius: 40px;
  font-family: monospace;
  font-size:20px;
  font-weight: bold;
}

When the above program was implemented, the dropdown box used to stretch till the end of the screen. I want a drop-down box that drops when the arrow is pressed and only 10 options are visible when it drops. Thanks in advance.

Upvotes: 2

Views: 673

Answers (1)

Tushar Gupta
Tushar Gupta

Reputation: 15923

You can use CSS to target all the elements after position 10 and hide them

Please note it will make top 10 options visible only. Change the number to target more options

option:nth-child(n+11) {
  display: none;
}

Code

option:nth-child(n+11) {
  display: none;
}
<select name="from">
  <option value='USD'>American Samoa(US Dollar)</option>
  <option value='XCD'>Anguilla(East Caribbean Dollar)</option>
  <option value='ARS'>Argentina(Argentine Peso)</option>
  <option value='AWG'>Aruba(Aruban Florin)</option>
  <option value='AUD'>Australia(Australian Dollar)</option>
  <option value='AZN'>Azerbaijan(Azerbaijan Manat)</option>
  <option value='BSD'>Bahamas(Bahamian Dollar)</option>
  <option value='BHD'>Bahrain(Bahraini Dinar)</option>
  //A long list of currencies cut short
  <option value='XPF'>Wallis and Futuna Islands(CFP Franc)</option>
  <option value='MAD'>Western Sahara(Moroccan Dirham)</option>
  <option value='YER'>Yemen(Yemeni Rial)</option>
  <option value='ZMW'>Zambia(Zambian Kwacha)</option>
  <option value='ZWD'>Zimbabwe(Zimbabwe Dollar)</option>
</select>

Upvotes: 2

Related Questions