Is it possible to replicate the onclick animation featured on the Google login form?
The animation involves the placeholder text shrinking and moving to the top left corner as you click the button box, while a border forms around the text.
Click here to see the Google login form in action
If I were to use only CSS for this, my method would be as follows:
<style>
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
top: -6px;
left: 0.5rem;
padding: 0.5rem;
font-size: 11px;
opacity: 1;
}
.inputText {
font-size: 14px;
width: 200px;
height: 35px;
outline: 1px!important;
}
.floating-label {
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 50%;
background: white;
transition: 0.2s ease all;
}
</style>
<div style="position:relative; display:inline;">
<input type="text" class="inputText" required/>
<span class="floating-label">Your email address</span>
</div>
That's not just a placeholder; it's actually a label positioned absolutely above an input field. There are two options available.
The first option involves using only HTML and CSS, but it requires all input fields to be filled in order to submit the form. If any field is left empty, the form cannot be submitted.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
#input:focus ~ .your-label,
#input:valid ~ .your-label {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" required />
<label class="your-label" for="input">Your Text</label>
</div>
</body>
The second option involves using JavaScript, allowing you to submit forms even if they are empty.
<style>
.wrapper {
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .your-label {
position: absolute;
}
.your-label.active {
background-color: yellow;
color: blue;
transform: translateY(-1rem);
scale: 0.8;
}
</style>
<body>
<div class="wrapper">
<input id="input" type="text" />
<label class="your-label" for="input">Yourt Text</label>
</div>
</body>
<script>
const form_input = document.querySelectorAll("#input");
form_input.forEach((e) => {
e.addEventListener("focus", () => {
e.nextElementSibling.classList.add("active");
});
e.addEventListener("blur", () => {
if (e.value === "") {
e.nextElementSibling.classList.remove("active");
} else {
e.nextElementSibling.classList.add("active");
}
});
});
</script>
On my page with the user.master layout, I have a Cart button and a SignIn button. However, I am unable to redirect to these pages without filling out a form first. Is there a way to enable redirection without requiring form submission? Any advice or explan ...
Is it possible to display different images from a server using AngularJS? I have ng-repeat set up for posts and for each post, I want to retrieve its avatar. My approach is to call a function getImage(post.author.id) to fetch the corresponding avatar. $ ...
I am attempting to click on multiple links with the following code: self.browser.find_element_by_xpath("//li[@onclick[contains(text(),"+origin_iata_code+")]]").click() The origing_iata_code is from this list: ['FLL', 'MCO', 'AFL ...
Is there a way to change the styling of the video element that appears as a black rectangle with a strikethrough play button when the user is prompted for permission on Safari? Does it have a specific ID, class, or tag that can be targeted? I'm curre ...
While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...
I am currently utilizing PHP Simple HTML DOM to extract elements from the source code of a website (which is not my own). However, when attempting to locate a ul class named "board List", it is not being found. It seems like there may be an issue with spac ...
Currently developing a web application that involves NLP tasks. In my past projects, I have used the JWNL library in Java which has always served me well. I am curious to know if you have any advice on the most effective approach for querying the WordNet ...
Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...
Within a div, I have an iFrame that needs to have an absolute position for some reason. The issue is that when the iFrame's position is set to absolute, its content overlaps with the content below it. Is there a way to automatically adjust the height ...
Can someone assist me with deleting the table tr from the user table, where data is retrieved from an API? I have attempted the code below: $("principleTable").find("tr").hide(); $("#delAgentModal").modal("hide"); ...
As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...
In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...
Currently, I am in the process of creating a template page that includes a navbar and a footer with the intention of adding additional columns within the main div (container-fluid) at a later stage. However, I have encountered two issues that I cannot seem ...
I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...
My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...
I have a script that triggers an SSE event to fetch json encoded data from online.php. After some research, I discovered methods for sending JSON data via SSE by adding line breaks. My question is how to send JSON through SSE when the JSON array is genera ...
After implementing this code on my webpage, I noticed an issue where all select boxes required two clicks from the user to open the drop-down menu. The first click seemed to set focus on the box, and only on the second click would the drop-down actually ap ...
Is there a way to dynamically adjust the CSS for an element with opacity less than 0? How can I conditionally hide this element if that scenario occurs? if ($('#rounded_items li').css("opacity") < "0"){ $(this).css('display',&ap ...
My nextjs project is running on the following versions: "@mdx-js/loader": "^2.1.5", "@mdx-js/react": "^2.1.5", "@next/mdx": "^12.1.6", "next": "^12.1.6", Within my project, I ...
I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...