How to set autocomplete input to invisible in Google Chrome

Heads up before you start reading: This is a unique post, not a duplicate. Why? Because the answer provided here is different and addresses the specific need we have.

So, what we are looking to achieve is to make an input field transparent, as shown below:

Isn't that a beautiful design? Now, take a look at this:

That looks just... terrible. Is there a way to fix this?

The following solution does NOT yield the desired result:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.3) inset;
    -webkit-text-fill-color: #EEEEEE !important;
}

Any suggestions or ideas on how to address this issue?

jqueryhtmlcss

Answer №1

It appears to be the webkit autofill feature

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

You can customize the color by changing 'white' to your preferred color.

To change the text color, use:

 -webkit-text-fill-color: yourColor !important;

If you prefer an alternative solution, consider using:

input {
    background-color: red !important;
 }

For more details, visit

However, the recommended approach is still to utilize

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

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

How can I adjust the positioning of List Items (LI) when using an image as a bullet point?

Looking for some CSS help! .ul{ list-style-image:url(/images/bullet.png) } I have a 20 x 20px bullet.png, but the text is displaying at the bottom of the image. I want to center the text inside the image without moving the entire bullet. Any suggesti ...

csslistitem

Enhance your webpage by incorporating a CSS subclass using jQuery's addClass

Attempting to apply a subclass to a class using jQuery has proven tricky. The CSS in question is as follows: .block:nth-child(7) .permahover { top: 0 !important; left: 0 !important; opacity: 0; filter: alpha(opacity=0); -webkit-transform: t ...

javascriptjquerycsssubclassaddclass

How can I extract data from a link using Python?

Currently, I am working on a Python program to extract the rating of a movie from one of my preferred websites. Here’s an example link to a review: Right now, I am using string.partition commands to retrieve sections of the source HTML code that contai ...

pythonhtml

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

csshtmlvideoresponsive-design

Adjusting the dimensions of :before with JavaScript: A Step-by-Step Guide

There's this CSS3 tag named body:before that I'm working with, and I'm looking to adjust the height and width of body:before using JavaScript. Any suggestions on how to achieve this? ...

javascriptcssweb

Using javascript to navigate back to the previous page without redirecting to the main page

When utilizing an iframe, I've implemented a back button that triggers the following JavaScript code when clicked: document.getElementById("myframe").contentWindow.history.go(-1); // back While this works as intended, if there are no previous pa ...

javascripthtmliframe

Ways to retrieve the content of a text box within a cell

Here is the code snippet I am currently working with: <tr val='question'> <td> <input style='width: 500px' type='text' placeholder='Q.Enter your question here for radio button? '> </ ...

javascriptjqueryhtml

Determining the starting and ending position of text within an element using jQuery

Delving into the world of jQuery/JS has been both challenging and exciting for me. However, I've encountered a problem that's got me stumped. Here is a snippet of text that I need to work with: blablablabla <b data-start="" data-end="">#fo ...

javascriptjquery

Center align three spans with different heights within a div

When faced with this particular set of HTML: <div class="wrapper"> <span class="left"></span> <span class="middle"></span> <span class="right"></span> </div> The .left and .right elements have fixed heights ...

csshtmlvertical-alignment

What is the best method for connecting my HTML to jQuery code?

Apologies for my lack of experience in coding, but I will try to keep this brief. To put it simply, when I insert my jQuery code directly into the HTML file below the content, it works perfectly - the element I want to animate 'hides' and then & ...

javascriptjqueryhtml

Can someone explain how the "class*=" selector functions in Django/Javascript/SQLite3? I'm curious about its purpose and how it operates

Embarking on a web development project in Django involving a database of ancient Greek and Latin texts previously worked on by others. Although I have some basic knowledge of Django and Javascript, there are still areas where I require clarification. Exam ...

javascriptjquerypythondjangosqlite

Card flipping functionality is not functional on Internet Explorer browsers (versions 11, 10, and below)

After coming across a tutorial on CSS3 transform by David Desandro, I tried implementing the code but unfortunately, it does not work in Internet Explorer... I noticed that clicking "flip" only results in Card 1 being displayed while card 2 remains hidden ...

cssinternet-explorertransforminternet-explorer-10internet-explorer-11

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

javascriptjqueryqunit

Receive alerts whenever a MySQL table is modified in PHP, all without requiring a page refresh and without burdening the server

My current project involves developing a card game where the logic requires the first player to wait until another player joins. Once the second player arrives on the page, an update is made in the database and Player 1 receives a notification that Playe ...

phpmysqlajaxjquery

arranging bootstrap containers to create a slideshow

Looking for advice on stacking containers in Bootstrap. I'm trying to create a page that functions like a PowerPoint presentation, where clicking on an image hides the current container and reveals the next one. This requires the containers/slides to ...

jquerycsstwitter-bootstrap

Is there a way to send PHP form data without being redirected to the action file? (Utilizing AJAX for data interaction)

When I click a button with $("#btn").load("form.php") in index.php, a form is loaded. I am looking for a way to prevent the page from redirecting to the action file after submission and instead add an item to the table located below the form. You can chec ...

phpjqueryajaxformsaction

What is the process for receiving input from a text field on a Django webpage and subsequently updating an SQL table with the submitted information?

I am currently developing a website with a specific purpose of managing inactive Tableau workbooks. By logging into the site, users will be able to view their old workbooks and determine which ones to retain. This will be achieved by collecting simple tex ...

htmlmysqlsqldjango

"Utilize AJAX to initiate an HTML form submission, sending a POST request

Can you assist me in sending a registration form to my controller via ajax instead of using a submit button within a BeginForm? This is what the HTML code looks like: @Html.LabelFor(m => m.Email)<br /> @Html.TextBoxFor(m => m.Email)<br /& ...

jqueryajaxasp.net-mvc

Restrict form submission when minimum and maximum requirements are not met using JavaScript

I'm currently using JavaScript to show an error message when a user clicks on the form submit button and the entered number is not within the specified min and max range. The problem I am facing is that even when the submit button is clicked, the form ...

javascriptjqueryhtml

Stop HTML5 video playback when resizing the window

I am currently working on a responsive HTML banner that includes a video using the video tag. The entire unit scales with the window size, and I have set up a breakpoint to trigger new divs when the window width is below 820px. This is achieved with the fo ...

javascriptjqueryhtml5-video