Challenges with styling <input> elements and autofill functionality

I am currently working on a login modal and have encountered an issue with styling input tags for browser autocomplete. Despite my efforts to reset the User Agent Stylesheet styling, the old styling reappears whenever autocomplete is triggered.

Below is a simplified version of my react login form:

<form id="login-popup-container">
    <div className="login-field-container">
        <div className="login-value-title user">email</div>
        <input className="answer login-info" type="text" />
    </div>
    <div className="login-field-container">
        <div className="login-value-title password">password</div>
        <input className="answer login-info" type="password" />
    </div>
</form>

In my index.css file, I have included the following styles:

input, input:focus, input:active, input:hover, input:-webkit-autofill, input:autofill, input:indeterminate, input:enabled, input:valid {
    outline: none !important;
    border:none !important;
    background-image:none !important;
    background-color:transparent !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

While this solution works in a chrome incognito browser as intended.

However, when using a regular chrome tab and triggering autofill, the User Agent Stylesheet styling returns to the input elements like shown here. I have attempted various pseudo-classes to reset the input tag styling but without success.

Has anyone else encountered this issue or knows why it occurs?

javascripthtmlcssreactjsinput

Answer №1

If you're facing a similar issue... I found a workaround by combining Zach Jensz's solution with adding a transition delay to <input> elements. It's not an ideal fix, but it does the job for me.

This is how my css reset now looks:

input {
  all: unset;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: all 5000s ease-in-out 0s;
}

and here is the styling I applied to my inputs:

.classname-used-for-my-inputs {
    background: transparent;
    background-color: transparent;
    color: white;
    border: none;
}

The reason for the delay hack is because even after resetting all styles, the User Agent styles would reappear during an autocomplete event (I couldn't find a way to stop this). However, with such a long delay time, it's practically unnoticeable and serves its purpose for me.

If someone can offer a cleaner solution or explain why this happens, please let me know so I can make improvements.

Answer №2

UA styles cannot be overridden using !important

Many browsers' user agent style sheets include the use of !important in their :-webkit-autofill style declarations, making it difficult for webpages to override them without resorting to JavaScript hacks. https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

To efficiently reset all styles on your inputs, consider using the CSS all property!

input {
  all: unset;
}

You can utilize these global values:

  • initial - sets all properties to default defined by CSS
  • unset - inherits normally or set to initial if not inherited
  • revert - sets properties back to UA-defined defaults for elements

Answer №3

When using styled-components, it's best to keep your styles confined to the global.styles folder.

input {
  all: unset;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Waiting for the completion of the previous observable in an RxJS Interval Observable

I'm trying to create an interval observable that waits for the last execution before proceeding. Here are some attempts I've made: First attempt: interval(1000) .subscribe(async x => { await new Promise(resolve => setTimeout(resolve, ...

javascriptangulartypescriptrxjsobservable

Conceal an element in React when a specific Id is clicked

When a filter is clicked, it should display the corresponding filters based on their id. If clicked again, the filters should be hidden. For example, if Filter 1 is clicked, it will show and then hide when clicked again. Click here for more information. ...

javascriptreactjs

A floating transparent Turing image transformed into a clickable image

After creating an image button with a transparent black hover effect, I noticed that the image no longer functions as a "button." However, the hover effect still works. Is there a way to maintain the button functionality while keeping the color overlay? V ...

htmlcss

When the page size decreases, implement a media query to rearrange div elements in a vertical order

I am currently facing a design challenge with a website component that appears as one solid inline block. While it looks okay on a normal-sized screen, things start to look strange when the screen size decreases. I have attempted using a media query to adj ...

htmlcssmedia-queriesvertical-alignment

How can I append an object key to the end of a URL link within an anchor tag

I seem to be facing a problem where I am attempting to append the key of my object at the end of a URL. It appears to work fine as a button, but for some reason the key is not being displayed within the href attribute. Typically, I would use "+" to conca ...

javascriptreactjsurlreact-routerhref

Retrieve DOM elements within a Vue.js modal using JavaScript

I have integrated the Vue.js modal into my Vue app using a Vue component. The template section of this component includes the modal itself: <template> <!-- Modal: Edit exercise --> <modal name='edit-exercise-modal' ...

javascriptvue.jsdomvuejs2

Bootstrap 4's Img-fluid class fails to properly resize images

Having a bit of trouble with my navbar setup. I want to use an image brand with img-fluid so it resizes to fit the div and remains responsive. However, instead of resizing, the image just stretches out the navbar making it huge. Here's my code: ...

htmlcsstwitter-bootstrapbootstrap-4

Ajax is encountering issues retrieving the content

I'm a beginner when it comes to working with ajax. I attempted to compile this simple code, but for some reason it's not fetching the contents of the file. This is the code I'm using: <!DOCTYPE html> <html> <head> <scr ...

jqueryhtmlajax

JS | How can we make an element with style=visibility:hidden become visible?

HTML: <div id="msg-text"><p><b id="msg" name="msg" style="visibility:hidden; color:#3399ff;">This is a hidden message</b></p></div> JS: $('#url').on('change keyup paste', function() { $('# ...

javascriptjqueryhtml

Exploring ways to create simulated content overflow using react-testing-library

I have integrated material-table with material ui to develop a spreadsheet application. One of the features I have added is setting a maximum width of 50px for cells. If the content in a cell exceeds this width, it will display an ellipsis at the end of ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Enhancing the appearance of child elements using CSS modules in Next.js

My Countdown component implementation includes: import styles from "./Countdown.module.scss"; import React from "react"; import useTimer from "hooks/useTimer"; import cn from "classnames"; function Countdown({ date, ...

cssreactjsnext.jscss-modules

Oops! An error has occurred: The requested method 'val' cannot be called on an undefined object

I am struggling with this issue. This is the code that I am currently working on: http://jsfiddle.net/arunpjohny/Jfdbz/ $(function () { var lastQuery = null, lastResult = null, // new! autocomplete, processLocation = function ...

javascriptjquery

Unordered list in Bootstrap Collapse not responding after initial click

I recently created a filetree page on my website and incorporated some bootstrap collapse elements that seem to function as intended. However, I am encountering an issue where the folder content does not collapse upon clicking the folder symbol (button) fo ...

javascriptphpbootstrap-5

Images in Android webview disappearing after first load

When it comes to loading a local HTML file with local images into a WebView on Android, everything seems to work fine on emulators and newer devices. However, I encountered an issue with a much older device running Android 2.3.4. Initially, the images disp ...

javajavascriptandroidhtmlwebview

What is the process for activating a button after a checkbox has been selected? Additionally, how can a value be dynamically transferred from a checkbox to the rezBlock_1 block?

What could be the reason for my code not functioning properly? How can I enable a button once a checkbox is selected? Also, is there a way to dynamically move text from a checkbox to the rezBlock_1 block? CODPEN https://codepen.io/RJDio/pen/RwPgaaZ doc ...

javascripthtmlcss

Header Overflow Error Encountered in Node.js GET Request

While attempting to programmatically submit a form through Google forms using a GET request, I encountered the error message Parse Error: Header overflow. The debug code output is as follows: REQUEST { uri: 'https://docs.google.com/forms/d/e/9dSLQ ...

javascriptnode.jsexpress

Instructions for saving a binary file on the client using jQuery's .post function

I am working with a handler that has the following code: HttpRequest request = context.Request; HttpResponse response = context.Response; if (request["Type"] != null) { try { string resultFile = null; ...

javascriptjqueryposthttphandler

Is there a way to publish a React app on GitHub Pages successfully?

I'm facing an issue while trying to deploy my React web app to GitHub pages. Even though the console indicates that the app is ready to be published and prompts me to run the command npm run deploy, I am unable to find the website online after doing s ...

reactjsdeploymentgithub-pages

Is it possible to attach a CSS file specifically to just one React component?

Is there a way to restrict the CSS styling in my Home.js component so that it does not affect any other components? I have a separate CSS file for each component, but when I apply the styling from one file to Home.js, it ends up affecting everything else ...

cssbootstrap-5

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width. I found this CSS solution for the first ...

htmlcsscss-tables