Tuesday, September 28, 2010

HTML combobox(select drop down) issues in Safari

There are two main CSS attributes related to select form tag that Safari browser for windows doesn't understand.

1. If I assign a border to 'select' tag in CSS the Safari browser will not display the 'dropdown icon' at all.

2. If I want to increase the height of combobox I will possibly use a 'height' or 'padding' attributes. Safari doesn't understand both the attributes in case of 'select' tag. In order to increase the height of dropdown box in safari 'line-height' attribute comes to rescue.

Remember: If you set border or background color to combo box, it will not display the drop down arrow on Safari.

select {
padding:2px 3px 2px 2px;
line-height: 20px;
vertical-align:middle;
}

<select>
<option>Please Select</option>
</select>