Arquivo da tag: mamaeQriaSerDesigner

Placeholder no select

Tem nada mais munito que aqueles formularios a la Twitter, com o nome dos campos dentro do input.
Todo mundo usa! Tá na moda tá na C&a. Ainda mais que agora é nativo no HTML5 e bibibi.
E os plugins para funcionar em browsers antigos ae são mamão com açucar.

Só tem UM problema. O cliente vai te pedir o placeholder no select, e lá.. lá o maledeto não funfa.
Fiz pog, observem..

O “placeholder” vai ser uma opção default:

<select id="opcoes" name="opcoes">
     <option value="" default class="select-default">Instituição</option>
</select>

E quando o select for aberto, a opção não será visualizada:

select.placeholder-select {
    color: #999;
}
 
select .select-default {
    display: none;
}

Essa opção default vai ter cor de placeholder, acinzentado, pela classe que colocamos no javascript (o estilo está acima):

$(function() {
      $("select").change(function () {
                $(this).removeClass('placeholder-select');
                if ($(this).val() == '') {
                    $(this).addClass('placeholder-select');
                }
            }).click(function () {
                $(this).removeClass('placeholder-select');
            }).focusout(function () {
                $(this).change();
        });
});

E vualáá!