How to Set Height for the Drop Down of Select box
In Case of setting size (height/width) and fitting the selection list in the pop up then try the following in 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>
// here onclick="this.size=5;" will set the size to 5 when you click on the selectList. //it works fine for Chrome,Firefox,Edge.
Thanks
Seriously guys, there is a size attribute for the select
element:
<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/
Try adding this to the <select>
element:
onfocus='this.size=10;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();
like:
<select onfocus='this.size=10;' onblur='this.size=1;'
onchange='this.size=1; this.blur();'>
SAMPLE DEMO
As much as I see, none of the former answers explain the Options box. As much as I know, we don't have accessibility to manipulate options in a select box. We just can change the colors and background color at the same time, add a new font and that's all we could do. If we add padding or margin to the Options, the drop-down list will be still the same as its initial condition.
The only way to do so is to design a select-box on your own( by using radio buttons, prevent their default style, and add a background color to it. )