<select> with size attribute: iPhone renders blank
When rendering a select dropdown as below, the iPhone renders it blank. How can I fix this?
-
My simple fix for this, using Jquery:
$(document).ready(function(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) { $('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>'); } });Works like this:
Wait for document to load
If user visits the site using an iPhone, iPod or iPad execute script
Add a selected and disabled option at the top of your select list, with the text "..Please select something".
Does nothing in all other browsers, works great :D
讨论(0) -
If you need to display one of the options, use the following: HTML selected Attribute
Your webpage at firefox:
讨论(0) -
Looks like there is no standard way to do it, based on content of other topics on stack overflow:
- Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
- jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)
But author of the second topic wrote a plugin that emulates that behavior: https://github.com/redhotsly/safarimobile-multiline-select
讨论(0) -
It appears that people here might not be fully understanding the issue. The problem is that the iOS browser will not render the label for the unselectable first field, which would typically be a "Please select ..." type indicator. If it is not selected, iOS renders it as blank. This is not desirable, because there are choices for the user to make, but the field appears as blank.
You cannot also set it programatically selected to get the "Please select" to display, because if the field is required, the form validation no longer works, as the browser considers the first field as selected, even though it is flagged as unselectable.
The "Bug" is that iOS browser will not display the label for the first field, when it is set as unselectable.
讨论(0)
加载中...
- 热议问题