Ways to modify input field appearance when address autofills

I recently noticed that when I fill in a form on my chrome browser and select an address from the stored options, the input fields turn blue like this: https://i.sstatic.net/eKRlg.png

Is there a way for me to change the CSS so that the input fields don't get highlighted in blue? I tried using the code below but it didn't work:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  background-color: transparent;
}

Answer №1

If you want to make your input field transparent when autofill suggestions are selected, unfortunately it is not possible. However, you can modify the color of the input field after an autofill suggestion using the following CSS:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can adjust the text color of the autofill suggestion with this CSS:

input:-webkit-autofill {
-webkit-text-fill-color: yellow !important;
}

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

Troubleshooting: jQuery addClass() function not functioning properly in conjunction with attr("href", something)

I am trying to implement a unique feature for a link using a Bootstrap button, where it only works on the second click. On the first click, the appearance of the link should change slightly. To achieve this, I am utilizing the .addClass(newClass), .removeC ...

What is the best way to create divs with no gaps in between them?

I am trying to create a div structure that resembles the one shown below, with one div on top and two divs under it. I would prefer not to use tables, ensuring there is no space between the divs, and if possible, having collapsed borders. _________ | ...

What's the reason for the malfunction of the "required" attribute in my Angular form?

I'm a beginner when it comes to using Angular. Here's the template I've set up for a Register page in Angular. All labels and inputs are enclosed within the form tag. However, I'm facing an issue where the default behavior of 'requ ...

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

Eliminating the issue of double scroll bars that overlap each other

Currently, I am developing a website that utilizes javascript, html, and css. One of the pages on the site displays all users as list items within an unordered list, which is nested inside two separate div elements. When accessing the page on my phone, bot ...

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

Issues with page loading arise when trying to integrate HTML binding in an Angular 6 project

The code below uses Angular 6 and Bootstrap 4, but it seems to have some issues: getNumberOfPossibleSteps() provides an array of integers: [1, 2, 3, 4] getDropDownElements() gives an array of selectable options for each step like this: ["- select an opt ...

How jQuery Mobile Navbar behaves with 4 elements instead of 5

I am currently experimenting with jQuery Mobile and I have come across a discrepancy. The documentation states that the navbar should wrap on five elements, but in my testing, it is wrapping at only four elements. Is this the expected behavior? Here is th ...

Remove all HTML tags except for those containing a specific class

Looking for a regex that removes all HTML tags except the "a" tags with the "classmark" class For example, given this HTML string: <b>this</b> <a href="#">not match</a> <a href="#" target="_blank" ...

The navbar expands in height when resized

I've been working on creating a responsive navbar, but I'm facing an issue where the height of the bar doubles between phone screen size and full window size. Despite trying various Bootstrap classes, I haven't had any success in fixing this ...

After clicking on a specific href element with a designated class, trigger the display of a custom dialog styled using CSS

I recently added a unique class to certain links on my website. When these specific links are clicked, I want them to trigger a customized dialog box. My goal is to modify the CSS of this special dialog box. Only links with this particular class should ...

Discovering elements with Selenium through XPATH or CSS Selector

Having trouble locating the "import" element using Selenium Webdriver in C#. I've attempted the following codes but haven't had any luck: driver.FindElement(By.XPath("//*[@class='menu_bg']/ul/li[3]")).Click(); driver.FindElement(By.XPa ...

Issue with Collapse Feature on Bootstrap 3.x Navbar

The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...

"How to retrieve the height of an element within a flexslider component

I need some assistance with using JavaScript to determine the height of an element within a flexslider. There are two challenges I am facing. When I attempt to use a regular function getHeight(){ var h = document.getElementById("id-height").style.height; ...

100% div height scrollable navigation bar

I am working with bootstrap and have a span2 on the left side of my page acting as a navigation menu. The nav contains a list of items and I want it to be scrollable while taking up the remaining height of the page. Instead of absolutely positioning the n ...

Utilizing jQuery's .clone() function to duplicate HTML forms with radio buttons will maintain the radio events specific to each cloned element

I'm currently developing front-end forms using Bootstrap, jQuery, HTML, and a Django backend. In one part of the form, users need to input "Software" information and then have the option to upload the software file or provide a URL link to their hoste ...

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

Consistent height for h2 containers across all CSS grid columns

Is there a way to ensure all h2 containers have the same height, both with JavaScript and without it? The h2 titles are dynamic and can vary in length, but I want to maximize the space for all containers. img { max-width: 100%; height: auto; } .gri ...

I am encountering an issue with the navigation bar and container layout in Bootstrap

I'm new to utilizing bootstrap and currently, I'm working on creating a navigation bar. Here is the code that I have written: <nav class="row navbar navbar-expand-lg navbar-light bg-white"> <a href="#&q ...

Incorporating CSS code directly into a PHP webpage instead of linking to an external CSS

I've been struggling to find a solution for this issue. I am trying to figure out how to insert CSS code into my PHP page. My PHP page contains scripts and uses echo to display HTML elements when the page loads. Among these elements are three forms w ...