I'm using Code Ignitor to generate a multiselect form using the form_multiselect() function. I don't however believe this issue is specific to CI, rather the way that mobile browsers render multiselect form fields.
My form code:
<div id="searchform" class="search search-form search-horizontal">
<?php
$detectselect = isset($selecteddetec) ? $selecteddetec : '';
$gasselect = isset($selectedgases) ? $selectedgases : array();
echo form_open('searchproduct', array('name' => 'contact', 'class' => 'searchproduct'));
echo ('<div class="boxes">');
echo form_label('Type of detector', 'typeofdetect');
echo form_dropdown('typeofdetect', $detecttype, $detectselect);
echo ('</div>');
echo ('<div class="boxes">');
echo form_label('Gases to detect', 'gastodetect[]');
echo form_multiselect('gastodetect[]', $gasdetectopt, $gasselect, 'class="gas-multiselect" placeholder="Choose gases..."');
echo ('</div>');
echo form_hidden(array('posturi' => $pgalias));
echo form_submit('submit', 'Search', "class='buttons'");
?>
</form>
</div>
On a desktop browser, the form has the Chosen jQuery library applied which in turn handles the placeholders for the fields, these work correctly.
On mobile devices the Chosen library is disabled so normal form markup is used. The placeholder for the single select field works as expected however the multiselect displays '0 Selected' by default and nothing i do seems to change that.
Does anyone have any experience with overriding it? passing a placeholder attribute through the form_multiselect() function makes no difference, and I can't find any answers online. We need a placeholder as on mobile devices we have no form labels (and due to space in the display, we would really rather avoid them)
Edit:: Screenshot of the issue
Edit 2::
I have accepted Dray's answer below, for completeness this is what i needed to pass into the options array in code ignitor.
$a['0" default selected disabled="disabled'] = 'Choose gases...';
you can make the first option of your select field as:
<option value="" default disabled selected>
Your place holder here
</option>
P.S. This is just a workaround.