I have been using the Floating labels demonstration from Bootstrap 4.3.
If the browser already has credentials saved for autocompletion, the formatting of the <input> element gets disrupted.
The animation (as well as the size and margin properties) of floating labels only kick in when the window/document is in focus.
How can I prevent these issues?
I have tried using the CSS property :-webkit-autofill, as well as focusing on the first input field, but the problem persists.
Preview:
I have discovered the solution.
By default, the label will only be styled if the placeholder is not visible:
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
The key is to apply the same properties when autofill is detected with :-webkit-autofill:
.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group input:-webkit-autofill ~ label /* <<<< Add these */
{
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
After facing compatibility issues with CHROME and FIREFOX, I had to divide the previous recommendation into two separate CSS rules.
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
.form-label-group input:-webkit-autofill ~ label {
padding-top: .25rem;
padding-bottom: .25rem;
font-size: 12px;
color: #777;
}
I am trying to trigger an animation with a single class, and then have that animation play in reverse when the class is removed. To better explain, I have created a CodePen example of my current progress. In the CodePen, you can see that when the class . ...
I have a unique challenge where I want to fix a div to the bottom of the screen, but its width should always match the content it scrolls past. Visualize the scenario in this image: https://i.sstatic.net/i7eZT.png The issue arises when setting the div&apo ...
I am looking for a way to close the modal window either when a user clicks outside of it or presses the escape key on the keyboard. Despite searching through numerous posts on SO regarding this issue, I have been unable to find a solution that works with ...
This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...
My repeating background image (.png) looks great on desktop with repeat-x, but on mobile, it has a slight repeat-y edge at the top: https://i.sstatic.net/yFfea.jpg The source image is 300px wide and 100px high, and the CSS for this div is: background: u ...
I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...
Currently, I'm in the process of developing an application for a land developer company. The administrator of this application will be responsible for creating invoices, money receipts, and bills. I am looking to design these documents to resemble th ...
When using snappysnippet, we have the ability to extract only the CSS and HTML of a selected element. But is there a way to extract the entire CSS and HTML of a webpage? ...
I was able to successfully create a responsive input box, but for some reason, the button is not aligned in the center. Below is the CSS code: .webdesigntuts-workshop button { background: linear-gradient(#333, #222); border: 1px solid #444; border- ...
1 I am using Angular Material toolbar and trying to position a span inside the toolbar on the left side. I have attempted using CSS float left, but it is not working. Can anyone provide some assistance please? <mat-toolbar> <span>le ...
Take a look at this interactive coding playground showcasing the following React code: import React from "react"; import ReactDOM from "react-dom"; import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from " ...
When visiting the website here and clicking on the contact link, you should see a Google map. However, for some unknown reason, it does not display. The strange part is that when I open the contact.html file directly, the map works perfectly fine. It seem ...
I am currently working on a simple project using React with TypeScript, and I have run into an issue where the page content does not refresh as expected without having to reload the page. I am unsure of the underlying cause of this behavior. I have include ...
I am currently working on a design that requires a perfectly aligned table using divs. Here is what I have done so far: My goal is to have the time section placed on the left side of the entire row, while keeping the text right-aligned to avoid creating a ...
Hi everyone! I am new to both Rails and Stack Overflow, and I would really appreciate it if someone could guide me here. I am currently working on a test site that resembles a personal blog. It's mainly for showcasing one user's portfolio. In t ...
I am brand new to this field and I apologize in advance for any mistakes. Currently, I am working on a node.js project using webpack and HTML loader. To test the project, I am utilizing the dev server dependency to run it locally. All models, views, and te ...
I am working on combining two different codes and could use some assistance. Here is the HTML code: <div class="loader"> <span></span> <span></span> <span></span> </div> Followed by the CSS cod ...
.el:active{ background:red; } Is there a way to associate the above CSS active state with a JavaScript event, like this: $('.el').on('active', function(){ img.show(); }); I want the image to remain visible when el is presse ...
Situation: I am currently utilizing a bootstrap template within asp.net and encountering difficulties when trying to update the value of a textbox. The page is a child page of a master page, and I have experimented with setting the EnableviewState Proper ...
Chrome DevTools now automatically converts all HEX colors to RGB values, even if the color is set in CSS or using DevTools. Is there a way to prevent this conversion? I know about the method of holding down Shift + clicking the color icon to convert color ...