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. )

Tags:

Html

Css