Modify the input background to be transparent when using an autocomplete form

Is there a way to make the background color of my input transparent when the browser autocompletes my form? Currently, it looks like the image I've attached. Does anyone know how to achieve this?

I attempted to use the code below, but the background color ended up being white and the borders remained styled with the default yellow. I also want the text color to be white.

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

This is the current appearance:

Any help would be greatly appreciated :)

htmlcss

Answer №1

At long last, success is achieved using the following code snippet:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
}

Answer №2

Take advantage of this trick to increase efficiency

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
   -webkit-transition-delay: 9999s;
   transition-delay: 9999s;
}

Answer №3

Shoutout to martinezjc for the inspiration! If you leave the page open for a while, you'll notice the background changes.

To maintain a permanent background color without any transition effects, you can utilize CSS animation with the forwards fill mode.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

Simply replace 'transparent' with your desired color!

Answer №4

Finally, after extensive searching, I have discovered the ideal code that effectively utilizes both jquery and javascript to achieve the desired transparency effect on the field.

     input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-animation: autofill 0s forwards;
    animation: autofill 0s forwards;
}

@keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

@-webkit-keyframes autofill {
    100% {
        background: transparent;
        color: inherit;
    }
}

Works like a charm!

Answer №5

We've cracked the code, everyone! :)

input,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0) inset !important;
  background-color: transparent !important;
  background-clip: text;
}

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

conditional statement for manipulating data in javascript/html

I am working on appending results in an object as options in a datalist dropdown. While it is functioning correctly, the issue arises when not all elements have a specific level in the object consistently, impacting which results are added to the list. $( ...

javascriptjqueryhtml

Automatically scrolling down when modal pop-up appears

One of my website features is a modal popup that informs users about our use of cookies. When they click the accept button, a cookie is created to prevent the modal from appearing again for some time. However, I've noticed that when the modal pops up, ...

htmlcss

Utilizing the box-shadow feature on Bootstrap 4's card element

I'm having an issue with applying a simple shadow to a cards component. The shadow appears mirrored and out of place. My suspicion is that it might be related to the margin-bottom property, but I'm unable to pinpoint the exact reason behind this ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Navigate divs with varying z-index values

I want to change the z-index of 3 divs by toggling them using jQuery, but I'm not sure how to do it. What I want is to click a button that relates to a specific div and increase the z-index of that div so the content inside it is shown. Currently, all ...

javascriptjqueryhtmlcss

Changing the background color using jQuery switch case statement

I am attempting to utilize jquery to dynamically change the background image of a webpage based on different cases in a JavaScript switch statement. I have completed three steps: 1) Included this script tag in my HTML document: <script src="http://co ...

javascriptjqueryhtmlcss

How to use jQuery to hide radio buttons that are not checked when clicking a submit

Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button. <form method="post"> <input type="radio" name="radiobtn"> <label for="first">Fir ...

javascriptjqueryhtmlcss

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

javascriptjqueryhtmlcss

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Tips for toggling CSS classes based on the user's current page

<nav id="navMenu" class="navMenu"> <ul> <li class="active homePage"> <a href="index.php" title="Homepage">Home</a> </li> <li class="resourcesPage"> <a href="re ...

javascriptjqueryhtml

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

Ensure that a div remains active even after it has been selected through AJAX using jQuery

I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view. The structure of my conversation div is as follows: <div clas ...

javascripthtmlcss

Is it possible to adjust the positioning of this navigation style?

Discover a unique collection of navigation styles by following this link: http://tympanus.net/Development/ArrowNavigationStyles/ Be sure to explore the final style "Fill Path" at the end of the page. I'm interested in adjusting the position of the ...

htmlcss

Update the menu-link class to active for a single-page website

Currently, I have a one-page website that serves as a portfolio. The website features a menu at the top with links that direct visitors to specific sections of the page using # as links. I am looking to enhance the user experience by implementing a functi ...

jqueryhtmlcss

What methods can be used to prevent divs from overlapping when the window size is reduced?

Creating a login page with two main content divs in a section layout. The first div contains the logo, input prompts, and login/password reset buttons. The second div serves as a footer with social media links. On a full-size window, the logo is positioned ...

javascripthtmljquerycssbootstrap-5

What is the process for converting a hexadecimal color to rgba when using the Less compiler?

Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...

cssless

Landing page experiencing issues with client-side setTimeout functionality

Good Afternoon, I am currently working on implementing a loading animation for the pages on my website. However, I am facing an issue with the client-side setTimeout function not functioning as expected. Interestingly, the same function works perfectly on ...

javascripthtmljquerynode.jssettimeout

Ways to avoid the CSS on the page impacting my widget?

Currently working on a widget using JavaScript and avoiding the use of iframes. Seeking assistance on how to prevent the styles of the page from affecting my widget. Initially attempted building it with shadow DOM, but ran into compatibility issues with ...

javascriptcsswidget

After the animation has finished, the ".animated" class should be removed. If the element is reloaded, the class should be added back using plain

Within my CSS, there is a ".animated" class that is automatically applied to all elements with the "drawer-wrapper" class. The HTML structure looks like this: <div class="drawer-wrapper animated"> foo </div> I created a function that ...

javascriptcssanimationevent-listener

Error 405: Angular encounters a method not supported while attempting to delete the entity

I have developed an application that performs CRUD operations on a list of entities. However, when attempting to delete an entity, the dialog box does not appear as expected. To start, I have a HttpService serving as the foundation for the CRUD operations ...

htmlspringangulartypescriptrequest

Button hover in Chrome causing problems with Leaflet map

Since yesterday, I have been experiencing issues with the buttons on my page. chrome : Version 61.0.3163.100 (Build officiel) (64 bits) I do not encounter any problems with Firefox. The problem arises when I select text on my overlay; the overlay beco ...

htmlcssgoogle-chromeleaflet