input 에 focus 시 밑줄 생기기
페이지 정보
본문
style=============
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #C5E1A5;
}
form {
width: 80%;
max-width: 820px;
margin: 60px auto;
background: rgba(245,245,245,1);
padding: 60px 120px 80px 120px;
text-align: center;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
}
label {
display: block;
position: relative;
margin: 40px 0px;
}
input {
width: 100%;
padding: 10px;
background: transparent;
border: none;
outline: none;
}
.line-box {
position: relative;
width: 100%;
height: 2px;
background: #BCBCBC;
}
.line {
position: absolute;
width: 0%;
height: 2px;
top: 0px;
left: 50%;
transform: translateX(-50%);
background: #8BC34A;
transition: ease .6s;
}
input:focus + .line-box .line {
width: 100%;
}
.label-txt {
position: absolute;
top: -1.6em;
padding: 10px;
font-family: sans-serif;
font-size: .8em;
letter-spacing: 1px;
color: rgb(120,120,120);
transition: ease .3s;
}
.label-active {
top: -3em;
}
button {
display: inline-block;
padding: 12px 24px;
background: rgb(220,220,220);
font-weight: bold;
color: rgb(120,120,120);
border: none;
outline: none;
border-radius: 3px;
cursor: pointer;
transition: ease .3s;
}
button:hover {
background: #8BC34A;
color: #ffffff;
}
=====html=========
<form>
<label>
<p class="label-txt">The first field</p>
<input type="text" class="input">
<div class="line-box">
<div class="line"></div>
</div>
</label>
<label>
<p class="label-txt">The second one</p>
<input type="text" class="input">
<div class="line-box">
<div class="line"></div>
</div>
</label>
<label>
<p class="label-txt">And another one</p>
<input type="text" class="input">
<div class="line-box">
<div class="line"></div>
</div>
</label>
<button>Don't send</button>
</form>
javascript=====================
$(document).ready(function(){
$('input').focus(function(){
$(this).parent().find(".label-txt").addClass('label-active');
});
$("input").focusout(function(){
if ($(this).val() == '') {
$(this).parent().find(".label-txt").removeClass('label-active');
};
});
});
관련링크
- 이전글css로 height 자동으로 조절 20.01.02
- 다음글css flex로 세로 가운데 정렬 18.11.01
댓글목록
등록된 댓글이 없습니다.