Input Placeholder
<html>
<head>
<title>Input Placeholder</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h2>How to Create Custom Input Filed</h2>
<form>
<div class="input-field">
<input type="text" name="" required="">
<label>Please Enter Your Full Name</label>
<span></span>
</div>
<input type="submit" value="Show Result" name="" class="btn">
</form>
</div>
</body>
</html>
<style type="text/css">
*{margin: 0px; padding: 0px; font-family: arial; box-sizing: border-box; }
body{ display: flex; justify-content: center; align-items: center; background-color: #111; min-height: 100vh;}
.container{position: relative; width: 500px;padding: 40px; background-color: #151515;}
.container h2{color: #999; margin-bottom: 45px; display:block;}
.input-field{position: relative; height: 40px; width: 100%; display: block;}
.input-field input[type="text"]{position: absolute; display: block; background-color: transparent; border: none; box-shadow: none; font-size: :;position: absolute; display: block; background-color: transparent; border: none; box-shadow: none; font-size: 16px; color: #fff; width: 100%;}
.input-field label{position: absolute; top: 0px; left: 0px; color: #555; pointer-events: none; display: block; transition: 0.5s;}
.input-field input[type="text"]:focus + label,
.input-field input[type="text"]:valid + label{transform: translateY(-35px); font-size: 14px; color: #fff; background: #ff006a; padding: 2px 6px; outline: none;}
.input-field span{position: absolute; bottom: 0px; right: 0px; display: block; background: #555; width: 100%; height: 2px;}
.input-field span:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #00b0ff; transform: scaleX(0); transform-origin: right; transition: transform 0.5s ease-in-out;}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before{ transform: scaleX(1); transform-origin: left; transition: transform 0.5s ease-in-out;}
.btn{margin-top: 20px; border: none; box-shadow: none; padding: 10px 25px; background: #333; color: #fff; font-size: 16px; cursor: pointer; transition: 0.5s;}
.btn:hover{background-color: #00bcd4;}
input:focus{outline: none;}
</style>
Comments
Post a Comment