My goal was to create an input field with a transition effect on the placeholder text. To achieve this, I utilized a <span> tag to hold the placeholder and applied a transition using the :focus CSS selector.
The implementation works smoothly, but there are a couple of issues that I encountered. After entering text and clicking outside the input area, the placeholder transitions back and overlaps with the entered text. I want to prevent the placeholder from transitioning back if the text area contains text. Additionally, there is an issue where clicking on the placeholder does not select the text field.
I'm seeking assistance in resolving these bugs. Below is the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Input</title>
<style>
body {
margin: 0px;
}
#top-heading {
padding: 1rem;
text-align: center;
margin: auto;
margin-bottom: 1rem;
}
textarea {
width: 85%;
display: block;
height: 10vh;
margin: 1.5rem;
margin-top: 0rem;
padding: 0.5rem;
font-size: large;
}
span {
position: absolute;
top: 6rem;
padding-left: 2.7rem;
color: rgb(121, 120, 120);
font-size: larger;
}
textarea:focus~span {
color: black;
font-size: 1.091rem;
transition: .6s ease;
transform: translate3d(-1.15rem, -1.9rem, 2rem);
}
</style>
</head>
<body>
<h1 id="top-heading">Input</h1>
<textarea id="txt-input"></textarea>
<span>Enter the input</span>
</body>
</html>