Question

Is there any css property by which i can limit the displayed options in a dropdown.

I know that setting size = ‘value’ in select limits the displayed options in drpdown to that value. Is this achievable using css.

<select size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>

Using this the no of options visible will be limited to 5. Can this be done in css.
Actually I have a lot of dropdowns in my application and adding size to each of them is very time consuming and i may need to change the no of items displayed afterwards.

Answer 1

Add a class to the selects you want to change:

<select class="limit">
...
</select>

Then using some jQuery:

$('.limit').attr('size', 5);

Here’s an example.