How to add Chosen placeholder text on mobile devices?

Question

I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface: Theme's interface

However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution. The html code for the forms:

 <!-- Row --> <div class="row with-forms"> <div class="search-form-_property_type col-md-3 custom-tipo-imovel"> <select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select"> <option value="">Tipo de imóvel</option> <option value="apartamento">Apartamento</option> <option value="casa">Casa</option> <option value="sobrado">Sobrado</option> </select> </div> <div class="search-form-_cidade col-md-3 custom-tipo-imovel"> <select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select"> <option value="">Cidade</option> <option value="Curitiba">Curitiba</option> <option value="Campo Largo">Campo Largo</option> </select> </div> <div class="search-form-tax-region col-md-3 custom-tipo-imovel"> <select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select"> <option value="">Bairro</option> <option value="bigorrilho">Bigorrilho</option> <option value="cabral">Cabral</option> <option value="centro">Centro</option> <option value="portao">Portão</option> </select> </div> <div class="col-md-3 "> <button class="button fullwidth">Buscar</button> </div> </div>

How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.

*I noted that the first option is the same as the placeholder and has an empty value.

Answer 1

Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:

https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research

Example: https://material-ui.com/components/selects/