Desculpem por reativar, me confundi com as datas e achei que fosse desse ano. Agora que vi Fev de 2016. :|
O que me mudei foi adicionar mais uma classe no toggle do jquery para cada div, e criar essas classes no css. Parece que deu certo.
toggle
jquery
div
css
É esse o resultado que você quer?
$('.form_campos').on('focus blur', function (e) { $(this).parents('.form-group').toggleClass('focused''focused focus', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur'); $('.form_campos_box').on('focus blur', function (e) { $(this).parents('.box').toggleClass('focused''focused focus', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur');
body { font-family: Verdana;'Verdana'; font-size: 12px; } .form-group { position: relative; display: flex; height: 45px; float: left; margin-right: 2px; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .control-label { opacity: 0.4; pointer-events: none; position: absolute; transform: translate3d(5px, 22px, 0) scale(1); transform-origin: left top; transition: 240ms; z-index: 2; } .form-group.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos { height: 20px; color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; outline: none; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; background: transparent; } .form_campos:hover, .form_campos:focus { border-color: #1E90FF;none; } .form_campos_numeros { width: 123px; } /* BOX INPUT E BOTAO */ .box { width: 250px; display: flex; height: 44px; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .box input { outline: 0; width: 230px; height: 20px; border: 0; background: transparent; } .box_bt { margin-top: 28px; cursor: pointer; } .box_bt:hover { color: #1E90FF; } .box.focused { border-color: #1E90FF; } .box.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos_box { color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; position: relative; display: block; outline: none; } .box.focus, .form-group.focus { border-color: #1E90FF;} .box:hover, .form-group:hover { border-color: #1E90FF;} /* FIM BOX INPUT E BOTAO *
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='form-group'> <label class='control-label' for='numParcelas'>PARCELAS*</label> <input type='text' class='form_campos form_campos_numeros' id='numParcelas' name='numParcelas'> </div> <br><br><br><br><br><br> <div class='box'> <label class='control-label' for='auto'>FORNECEDOR*</label> <input type='text' class='form_campos_box' id='auto' name='nome'> <div class="box_bt"> <i class='demo-icon'>X</i> </div> </div>
$('.form_campos').on('focus blur', function(e) { $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur'); $('.form_campos_box').on('focus blur', function(e) { $(this).parents('.box').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur');
body { font-family: Verdana; font-size: 12px; } .form-group { position: relative; display: flex; height: 45px; float: left; margin-right: 2px; } .control-label { opacity: 0.4; pointer-events: none; position: absolute; transform: translate3d(5px, 22px, 0) scale(1); transform-origin: left top; transition: 240ms; z-index: 2; } .form-group.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos { height: 20px; color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; outline: none; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; background: transparent; } .form_campos:hover, .form_campos:focus { border-color: #1E90FF; } .form_campos_numeros { width: 123px; } /* BOX INPUT E BOTAO */ .box { width: 250px; display: flex; height: 44px; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .box input { outline: 0; width: 230px; height: 20px; border: 0; background: transparent; } .box_bt { margin-top: 28px; cursor: pointer; } .box_bt:hover { color: #1E90FF; } .box.focused { border-color: #1E90FF; } .box.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos_box { color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; position: relative; display: block; outline: none; } /* FIM BOX INPUT E BOTAO *
$('.form_campos').on('focus blur', function (e) { $(this).parents('.form-group').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur'); $('.form_campos_box').on('focus blur', function (e) { $(this).parents('.box').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0)) }).trigger('blur');
body { font-family: 'Verdana'; font-size: 12px; } .form-group { position: relative; display: flex; height: 45px; float: left; margin-right: 2px; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .control-label { opacity: 0.4; pointer-events: none; position: absolute; transform: translate3d(5px, 22px, 0) scale(1); transform-origin: left top; transition: 240ms; z-index: 2; } .form-group.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos { height: 20px; color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; outline: none; background: transparent; border: none; } .form_campos_numeros { width: 123px; } /* BOX INPUT E BOTAO */ .box { width: 250px; display: flex; height: 44px; border-color: #484848; border-style: solid; border-bottom-width: 1px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .box input { outline: 0; width: 230px; height: 20px; border: 0; background: transparent; } .box_bt { margin-top: 28px; cursor: pointer; } .box_bt:hover { color: #1E90FF; } .box.focused .control-label { opacity: 1; transform: scale(0.75); } .form_campos_box { color: #484848; z-index: 1; align-self: flex-end; font-size: 15px; padding: 5px; position: relative; display: block; outline: none; } .box.focus, .form-group.focus { border-color: #1E90FF;} .box:hover, .form-group:hover { border-color: #1E90FF;} /* FIM BOX INPUT E BOTAO *