Galera montei um sistema de input com o mesmo layout do android.
Tudo funciona perfeitamente no input
parcelas, porém o input
fornecedor fica dentro de uma div
, pois tenho que adicionar um botão no lugar do x.
O problema e que quando fico com o mouse sobre ele o alinha border fica azul, e quando saio ela volta a ficar preta.
Preciso deixar ela igual ao input parcelas, ou seja quando for clicada tem que ficar azul independente se o mouse esta sobre ela ou não.
Segue o meu código:
$('.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:hover {
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 */
<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>
CSS
o:focus
aoinput
, semjQuery
. Exemplo: jsfiddle.net/ojgdkjtc