Limitar as options do select

[solares 0]

Olá imasters.

Bem, meu problema é o seguinte, estou utilizando o materialize framework em um projeto.

E em um formulário de registro contem um select com vários options contendo os estados e tal,

entretanto, são 27 estados husdhguhu e ele fica muito grande no meu form, porque é em um modal. 

Pesquisei bastante na internet sobre, encontrei um atributo que pode ser usado no html, como o 'size="..." '.

Também encontrei algumas configurações em css o width e o height, mas já aviso, não tem nada a ver com

altura ou largura. Eu quero esconder as options pra não ficar tão grande, poderia ter o mesmo comportamento 

que o size (Lembrando que o size não funciona, acredito que seja algo do materialize). Alguém pode me recomendar

algo, seja em js ou css, estou desesperado por isso... Desde já obrigado.

 

Citar

<div id="cadastro" class="modal">
    <div class="modal-content">
        <div class="row">

            <form class="col s12" method="POST" action="controllers\registrar.php">

                <div class="row">
                    <div class="input-field col s6">
                        <i class="material-icons prefix">account_circle</i>
                        <input  id="first_name" type="text" class="validate">
                        <label for="first_name">Primeiro nome</label>
                    </div>
                    <div class="input-field col s5">
                        <input id="last_name" type="text" class="validate">
                        <label for="last_name">Último nome</label>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s6">
                        <i class="material-icons prefix">location_city</i>
                        <select id="group" name="estados" required>
                            <option value="">Selecione</option>
                            <option value="1">Acre</option>
                            <option value="2">Alagoas</option>
                            <option value="3">Amapá</option>
                            <option value="4">Amazonas</option>
                            <option value="5">Bahia</option>
                            <option value="6">Ceará</option>
                            <option value="7">Distrito Federal</option>
                            <option value="8">Espirito Santo</option>
                            <option value="9">Goiás</option>
                            <option value="10">Maranhão</option>
                            <option value="11">Mato Grosso do Sul</option>
                            <option value="12">Mato Grosso</option>
                            <option value="13">Minas Gerais</option>
                            <option value="14">Pará</option>
                            <option value="15">Paraíba</option>
                            <option value="16">Paraná</option>
                            <option value="17">Pernambuco</option>
                            <option value="18">Piauí</option>
                            <option value="19">Rio de Janeiro</option>
                            <option value="20">Rio Grande do Norte</option>
                            <option value="21">Rio Grande do Sul</option>
                            <option value="22">Rondônia</option>
                            <option value="23">Roraima</option>
                            <option value="24">Santa Catarina</option>
                            <option value="25">São Paulo</option>
                            <option value="26">Sergipe</option>
                            <option value="27">Tocantins</option>
                        </select>
                    </div>

                    <div class="input-field col s6">
                        <input type="text" id="municipio" class="validade">
                        <label for="municipio">Munícipio</label>
                    </div>

                    <div class="row">
                        <div class="input-field col s12">
                            <i class="material-icons prefix">email</i>
                            <input type="email" id="e-mail" class="validate">
                            <label for="e-mail">E-mail</label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="input-field col s6">
                            <i class="material-icons prefix">lock_outline</i>
                            <input type="password" id="senha" class="validate">
                            <label for="senha">Senha</label>
                        </div>

                        <div class="input-field col s6">
                            <input type="password" id="senha2" class="validate">
                            <label for="senha2">Confirmar Senha</label>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="modal-action modal-close waves-effect waves-teal btn-flat" name="send">
                            Cadastrar   <i class="material-icons right">create</i>
                        </button>

                        <button href="#!" class="modal-action modal-close waves-effect waves-teal btn-flat">
                            Cancelar    <i class="material-icons right">cancel</i>
                        </button>
                    </div>

                </div>
            </form>

        </div>
    </div>


</div>

 

[GabrielFerrari 41]

Uma solução com autocomplete não resolve?
https://stackoverflow.com/questions/34222775/how-to-create-autocomplete-form-with-materializecss