HTML5 CSS3 Input Design with Floating Placeholder On Focus

Hôm nay mình sẽ giới thiệu cho các bạn một giao diện Input Design with Floating Placeholder chỉ sử dụng CSS3 và Javascript rất dễ áp dụng.
<div id="input-container" class="">
    <label for="">Name</label>
    <input type="text" class="">
</div>

#input-container {
	position: relative;
	input {
		/*default style*/
		display: block;
	    width: 100%;
	    height: 34px;
	    padding: 6px 12px;
	    font-size: 14px;
	    line-height: 1.42857143;
	    color: #555;
	    background-color: #fff;
	    background-image: none;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	    /*end default style*/
	    position: relative;
	    z-index: 2;
	    border-radius: 0;
	    height: 50px;
	    padding: 0;
	    outline: none;
	    border:none;
	    box-shadow: none;
	    font-size: 24px;
	    line-height: normal;
	    background-color: transparent;
	    border-bottom: 2px solid rgba(0,0,0,.5);
	}
	label {
		position: absolute;
		line-height: 50px;
		margin-bottom: 0;
		font-size: 24px;
		-webkit-transition: .5s;
		-o-transition: .5s;
		transition: .5s;
		opacity: .5;
		z-index: 1;
	}
	&.focus {
		label {
			font-size: 18px;
			line-height: 18px;
			transform: translateY(-23px);
			opacity: 1;
			color:#00bcd4;
		}
	}
}

$("#input-container input").focus(function(event) {
    $(this).parent().addClass('focus');
}).blur(function(event) {
    if($(this).val() === '') {
        $(this).parent().removeClass('focus');
    }
});

0 thảo luận về HTML5 CSS3 Input Design with Floating Placeholder On Focus

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục