January 1, 1
+++ author = “Elizar” categories = [“css”] date = 2018-10-16T15:25:43Z draft = true excerpt = “Here’s a neat way to add smooth placeholder transition to your web form’s input fields.” image = “https://res.cloudinary.com/dyd19kbsp/image/upload/v1648310570/placeholder_pdoewh.png" tags = [“css”, “placeholder”] title = “CSS: Hipster Placeholder”
+++
Final result ☝
Here’s the markup.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hipster Form</title>
</head>
<body>
<h3>Register</h3>
<form method="get" target="#">
<p class="beep">
<input type="text" placeholder="x">
<span placeholder="First Name"></span>
</p>
<p class="beep">
<input type="text" placeholder="x">
<span placeholder="Last Name"></span>
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
And here’s the CSS.
* {
border: 0;
padding: 0;
margin: 0;
outline: none;
}
body {
background-color: #ffffff;
font-size: 18px;
padding: 24px;
font-family: Avenir, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
line-height: 1.5em;
margin-bottom: 1.5em;
}
input[type="submit"] {
font-size: 16px;
border: 1px solid blue;
padding: 12px 24px;
color: blue;
}
.beep {
position: relative;
}
.beep input {
position: relative;
padding: 12px 0px;
font-size: 16px;
display: inline-block;
border-bottom: 1px solid #AAAAAA;
background-color: transparent;
color: #AAAAAA;
z-index: 2;
width: 100%;
}
.beep input:not(:placeholder-shown) {
color: blue;
border-color: blue;
transition: all .25s;
}
.beep input:not(:placeholder-shown) + span::before {
content: attr(placeholder);
position: absolute;
left: 0;
font-size: 12px;
top: -11px;
color: blue;
opacity: 0.7;
transition: all .25s;
letter-spacing: 1px;
}
.beep input:placeholder-shown + span::before {
content: attr(placeholder);
position: absolute;
left: 0;;
font-size: 16px;
top: 8px;
color: #CCCCCC;
transition: all .25s;
}
.beep input::placeholder {
color: rgba(1,1,1,0);
}
Check out the demo HERE