Question

我的选择框在选项数量超过20时显示滚动我只想在选项超过10时显示滚动

 <select>
    <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>
  </select>

Answer 1

尝试将其添加到<select>标记：

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();

像：

   <select onfocus='this.size=10;' onblur='this.size=1;' 
        onchange='this.size=1; this.blur();'>

<强> SAMPLE DEMO

Answer 2

严重的是，select-tag有一个size属性。

<select size="10">
    <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>
</select>

FIDDLE： http://jsfiddle.net/UR46N/

Answer 3

如果设置大小（高度/宽度）并在弹出窗口中放入选择列表，则在VFPage- Salesforce中尝试以下操作：

<apex:selectList onclick="this.size=5;" required="true" id="form-element-05" value="{!scheduleBatchWrapper.hour}" size="1" styleClass="slds-select selectObj  slds-m-left_medium slds-m-top_medium schTime" style="max-width:50%; margin-bottom:5% margin-top:5%,max-height:20%" >
                                                                            <apex:selectOptions value="{!scheduleBatchWrapper.hoursList}"></apex:selectOptions>
                                                                        </apex:selectList>

//这里onclick =“ this.size = 5;”单击selectList时，它将大小设置为5。 //它在Chrome，Firefox，Edge上正常工作。

谢谢

Answer 4

据我所知，以前的答案都没有解释选项框。据我所知，我们无法在选择框中操作选项。我们只需同时更改颜色和背景颜色，添加新字体，这就是我们所能做的。如果我们在Options中添加padding或者margin，下拉列表还是和它的初始条件一样。

唯一的方法是自己设计一个选择框（通过使用单选按钮，防止它们的默认样式，并为其添加背景颜色。）

Answer 5

检查这个.i已经实现滚动到你的选择框。 http://plnkr.co/edit/XiKZ4X2DGYTJDjJX2xvw?p=preview

Answer 6

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

option {
    padding: 5px 0;
}

Answer 7

为什么不添加CSS样式来指定选择的宽度和高度。检查文章 - ＆gt; http://cssdeck.com/labs/styling-select-box-with-css3

Answer 8

使用下面的css

select{ padding:5px;}

如何设置选择框下拉列表的高度

8 个答案: