CSS Input Field Text Animation CSS Only Floating Label AND USING HTML L...

0 HTML And CSS Cooding July 04, 2022

HTML COODING

<!DOCTYPE html>

<html>

<head>

<title>CREATE INPUT FIELD</title>

<link rel="stylesheet" type="text/css" href="input.css">

</head>

<body>

<div class="inputbox">

<input type="text" required="required">

<span>First Name</span>

</div>

<div class="inputbox">

<input type="text" required="required">

<span>Second Name</span>

</div>

</body>

</html>

CSS COODING IS HERE

*{

margin:0;

padding: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body

{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

flex-direction: column;

gap:30px;

background: #1d2b3a;

}

.inputbox {

position: relative;

width: 250px;

}

.inputbox input{

width: 100%;

padding: 10px;

border: 1px solid rgba(255,255,255,0.25);

background: #1d2b3a;

border-radius: 5px;

outline: none;

color: #fff;

font-size: 1em;

transition: 0.5s;

}

.inputbox span{

position: absolute;

left: 0;

padding: 10px;

pointer-events: none;

font-size: 1em;

color: rgba(255,255,255,0.25);

text-transform: uppercase;

transition: 0.5s;

}

.inputbox input:valid~span,

.inputbox input:focus~span

{

color: #00dfc4;

transform: translateX(10px) translateY(-7px);

font-size: 0.65em;

padding: 0 10px;

background: #1d2b3a;

border-left: 1px solid #00dfc4;

border-right: 1px solid #00dfc4;

letter-spacing: 0.2em;

}

.inputbox input:valid,

.inputbox input:focus

{

border: 1px solid #00dfc4;

}

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.