1

Estou usando o efeito floating em um formulário para mover o label quando o usuário clicar no input ou select.

O problema é que o recurso só funciona se o atributo required estiver presente. O que é um problema visto que nem todos os campos são obrigatórios. Como fazer para que estes campos não obrigatários funcionem o efeito?

Segue abaixo código usado:

.form-control {
    background-color: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%;
    padding: 7px 12px;
    transition: all 300ms linear 0s
}

.form-control:focus {
    box-shadow: none;
    border-color: #313131
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 44px;
    padding: 5px 10px;
    font-size: 18px
}

.floating-labels .form-group {
    position: relative
}

.floating-labels .form-control {
    font-size: 20px;
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    border-bottom: 1px solid #e4e7ea
}

.floating-labels select.form-control>option {
    font-size: 14px
}

.has-error .form-control {
    border-bottom: 1px solid #f44336
}

.has-warning .form-control {
    border-bottom: 1px solid #ff9800
}

.has-success .form-control {
    border-bottom: 1px solid #4caf50
}

.floating-labels .form-control:focus {
    outline: 0;
    border: none
}

.floating-labels label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .form-control:focus~label,
.floating-labels .form-control:valid~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}

.floating-labels .bar {
    position: relative;
    display: block
}

.floating-labels .bar:after,
.floating-labels .bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #707cd2;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .bar:before {
    left: 50%
}

.floating-labels .bar:after {
    right: 50%
}

.floating-labels .form-control:focus~.bar:after,
.floating-labels .form-control:focus~.bar:before {
    width: 50%
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.floating-labels .input-lg,
.floating-labels .input-lg~label {
    font-size: 24px
}
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

<form class="floating-labels ">
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="numero" name="numero"  placeholder=" " required><span class="highlight"></span> <span class="bar"></span>
    <label for="numero">Número</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="bairro" name="bairro"  placeholder=" " required><span class="highlight"></span> <span class="bar"></span>
    <label for="bairro">Bairro</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="complemento" name="complemento"  placeholder=" " ><span class="highlight"></span> <span class="bar"></span>
    <label for="complemento">Complemento</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <select class="form-control p0" id="cidade" name="cidade" required> 
      <option selected="" value=""></option>
      <option value="1">Cidade 1</option>
      <option value="2">Cidade 2</option>
      <option value="3">Cidade 3</option>
    </select><span class="highlight"></span> <span class="bar"></span>
    <label for="cidade">Cidade</label>
  </div>
</div>
</form>

1 Resposta 1

1

Tem uma forma de resolver adicionando essa regra CSS

.floating-labels .form-control:not(:-ms-input-placeholder)~label { }

Com essa regra vc faz a validação com base se o input tem algo dentro ou não, e não usando o required. Se o placeholder aparece é pq não tem nada dentro, se ele desaparece é pq foi preenchido

Vc pode ler mais sobre ela nesse link, apesar de ser outro caso de uso pode te ajudar a entender o conceito: Como impedir que um Input Required já comece com o estilo de CSS :invalid

EDIT

Para o select tem mais alguns detalhes. É preciso fazer uma regra CSS baseada no value e depois usar um JS para aplicar. Pra facilitar eu coloquei um ID no pai do select

#sel .form-control:not([value=""]):valid ~ label { seu css }

E na tag HTML com o JS ficaria assim, de forma que se o valor for diferente de value="" ele aplica o CSS.

<select class="form-control" onclick="this.setAttribute('value', this.value);" value="">

Veja o seu código com essa regra funcionando e sem required no input

body {
    padding-top: 30px;
}
.form-control {
    background-color: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%;
    padding: 7px 12px;
    transition: all 300ms linear 0s
}

.form-control:focus {
    box-shadow: none;
    border-color: #313131
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 44px;
    padding: 5px 10px;
    font-size: 18px
}

.floating-labels .form-group {
    position: relative
}

.floating-labels .form-control {
    font-size: 20px;
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    border-bottom: 1px solid #e4e7ea
}

.floating-labels select.form-control>option {
    font-size: 14px
}

.has-error .form-control {
    border-bottom: 1px solid #f44336
}

.has-warning .form-control {
    border-bottom: 1px solid #ff9800
}

.has-success .form-control {
    border-bottom: 1px solid #4caf50
}

.floating-labels .form-control:focus {
    outline: 0;
    border: none
}

.floating-labels label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:placeholder-shown)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}
.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:-ms-input-placeholder)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}

.floating-labels .bar {
    position: relative;
    display: block
}

.floating-labels .bar:after,
.floating-labels .bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #707cd2;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .bar:before {
    left: 50%
}

.floating-labels .bar:after {
    right: 50%
}

.floating-labels .form-control:focus~.bar:after,
.floating-labels .form-control:focus~.bar:before {
    width: 50%
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.floating-labels .input-lg,
.floating-labels .input-lg~label {
    font-size: 24px
}


#sel label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
    z-index: -1;
}

#sel .form-control {
    background: none;
}

#sel .form-control:focus ~ label , 
#sel .form-control:not([value=""]):valid ~ label {
    top:-18px;
    font-size:14px;
    color:#5264AE;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <dic class="col-xs-12">
            <form class="floating-labels ">
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="numero" name="numero"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="numero">Número</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="bairro" name="bairro"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="bairro">Bairro</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="complemento" name="complemento"  placeholder=" " ><span class="highlight"></span> <span class="bar"></span>
                        <label for="complemento">Complemento</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group" id="sel">
                        <select class="form-control" onclick="this.setAttribute('value', this.value);" value="">
                            <option value=""></option>
                            <option value="1">Alabama</option>
                            <option value="2">Boston</option>
                            <option value="3">Ohaio</option>
                        </select><span class="highlight"></span><span class="bar"></span>
                        <label for="exampleFormControlSelect1">Example select</label>
                    </div>
                </div>
            </form>
        </dic>
    </div>
</div>

7
  • Muito bom @hugocsl, como eu faria no caso de um select, visto que ele não tem um placeholder 8/12/2018 às 17:35
  • @FredericoMoreira ai tem que ver como está sua estrutura, até pq o Select do Boostrap tem suas particularidades... Se vc acha que aqui resolveu seu problema vc pode marcar a resposta como Aceita e abrir uma Pergunta Nova e colocar o código do seu select e o efeito que vc precisa de ajuda.
    – hugocsl
    8/12/2018 às 19:39
  • @FredericoMoreira na verdade já fiz alguns testes aqui tentando mudar o CSS atraves do seu value mas acho que é impossível fazer isso sem JS, pois mesmo mudando o value a classe não muda.... Sugiro mesmo que vc abra outra pergunta, com o seu código, pois ai outras pessoas além de mim vão poder te ajudar.
    – hugocsl
    8/12/2018 às 20:24
  • eu até encontrei um código que funciona, mas não consegui fazer funcionar no meu código. Veja se você consegue me ajudar. codepen.io/dannibla/pen/amgRNR 8/12/2018 às 22:30
  • Editei a pergunta inserindo um select no código. 8/12/2018 às 22:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .