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>

12 comments:

  1. Hi Dipak

    your post is helpful for me.

    Thanks for the help.

    ReplyDelete
  2. Thank you, very helpful!!!

    ReplyDelete
  3. jim.giner@albanyhandball.comMarch 25, 2011 at 10:11 PM

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

    Plus the onclick js function behind the "select" doesn't work!

    ReplyDelete
  4. when zoom into IE 7 this not working

    ReplyDelete
  5. how do we fix these?

    ReplyDelete
  6. deepak,

    how it will work in ie7 ?
    could you revise this problem.

    ReplyDelete
    Replies
    1. This post is about Safari browser.. I will tweak in IE7 and get back to you

      Thanks

      Delete
  7. I am very much thankful to you.. since morning I was struggling like anything to find the solution

    ReplyDelete
  8. you solved my problem dude!! thanks a lot..:)

    ReplyDelete