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>
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>
Hi Dipak
ReplyDeleteyour post is helpful for me.
Thanks for the help.
Cheers!!
ReplyDeleteThank you, very helpful!!!
ReplyDeleteI stumbled upon this post and thought it was the answer to my "select" tag problems on my iphone. Sad to say it didn't help - still only showing an empty dropdown menu with 1 line on my phone.
ReplyDeletePlus the onclick js function behind the "select" doesn't work!
when zoom into IE 7 this not working
ReplyDeletehow do we fix these?
ReplyDeletedeepak,
ReplyDeletehow it will work in ie7 ?
could you revise this problem.
This post is about Safari browser.. I will tweak in IE7 and get back to you
DeleteThanks
thnks...
ReplyDeletethanks....
ReplyDeleteI am very much thankful to you.. since morning I was struggling like anything to find the solution
ReplyDeleteyou solved my problem dude!! thanks a lot..:)
ReplyDelete