New From Inputs Style Code HTML , CSS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<link rel="stylesheet" href="Form1.css">
</head>
<body>
<form action="">
<div class="input-field">
<input type="text" id="name" required/>
<label for="name">Name:</label>
</div>
<div class="input-field" id="section">
<input type="number" id="number" required>
<label for="number">Number:</label>
</div>
<div class="input-field" id="section">
<input type="email" id="email" required />
<label for="email">Email:</label>
</div>
<div class="input-field" id="section">
<input type="password" id="password" required />
<label for="password">password:</label>
</div>
</form>
</body>
</html>
CSS
body{
display: flex;
justify-content: center;
background-color: black;
}
form{
margin: 100px;
}
.input-field{
position: relative;
width: 250px;
height: 44px;
line-height: 44px;
}
label{
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #d3d3d3;
transition: 0.2s;
cursor: text;
}
input{
width: 100%;
border: 0;
outline: 0;
color: #d3d3d3;
padding: 0.5rem 0;
border-bottom: 2px solid #d3d3d3;
font-family: sans-serif;
box-shadow: none;
background-color: transparent;
font-size: 1rem;
}
#section{
margin-top: 30%;
}
input:invalid{
outline: 0;
}
input:focus,
input:valid{
border-color: #00dd22;
}
input:focus~label,
input:valid~label{
font-size: 14px;
top: -24px;
color: #00dd22;
}
Comments
Post a Comment