Customize the yellow background color of Safari's autofill feature by following these simple

When I open this image in Safari, this is what I see:

https://i.stack.imgur.com/KbyGP.png

However, this is the code I have:

https://i.stack.imgur.com/4wEf0.png

References:

How to Remove WebKit's Banana-Yellow Autofill Background

Remove forced yellow input background in Chrome - even though it mentions Chrome, it still relates to webkit-autofill

I attempted to use 

background-color:white !important;
to override the locked CSS. The debug tool displayed the User Agent Stylesheet background-color as crossed out, but the color did not change and the custom style was in effect.

This situation left me puzzled; I am unsure why I am unable to modify the User Agent Stylesheet.

javascripthtmlcsssafari

Answer №1

After some research, I discovered that certain CSS solutions like -webkit-box-shadow and background-color only function properly in Google Chrome and not in Safari. What ended up working for me was adding background-clip: content-box. Ultimately, I found a code snippet that works seamlessly across all browsers:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 60px #fafafa inset !important;
    background-color: #fafafa !important;
    background-clip: content-box !important;
}

Answer №2

It has come to my attention that most browsers are set on indicating autofill (especially Safari, which is quite adamant about it).

I stumbled upon a clever workaround where -webkit-box-shadow can be used to mask the background color. However, targeting a specific input with a class proved to be challenging due to specificity issues.

In Safari version 10.0.2, the browser automatically inserts shadow content as part of the user agent, revealing the autofill background-color and value. Unfortunately, these styles cannot be directly manipulated by users, hence the solution provided below.

input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #333;
}

If there's also a border-bottom in the input field:

input:-webkit-autofill, input:-webkit-autofill:focus {
  border-bottom: 1px solid #333;
}

Sources:
- insightful medium post
- engaging stackoverflow discussion
- understanding why browsers ignore autocomplete="off"

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

Extract the label from Chip component within the onClick() event in material-ui

-- Using Material-UI with React and Redux -- Within my material-ui table, there are <TableRow> elements each containing multiple <TableCell> components with <Chip> elements. These <Chip> components display text via their label prop ...

javascriptreactjsmaterial-ui

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

Vue.js - when it comes to rounding off digits, I keep getting unexpected results

Currently, I am in the process of calculating my totals and I need to ensure that they are fixed to 2 decimal places. Here is a snippet of my code: this.selectedCompaniesDetails.forEach((company) => { if(company.id == p.compa ...

javascriptvue.js

JavaScript: Closing a Tab

Using AngularJS for my project and I have a link that opens a tab. If the user right clicks on the link and selects open link in new tab, then on the page abc.html I have code like $window.close(); which is not working as expected. I am receiving the error ...

javascriptjqueryangularjs

What is the process for deleting headers in a $http.get call and simultaneously including "application/json" and "text/plain" under the "Accept" header?

I'm relatively new to angularjs and I'm currently working on implementing some new features to an existing Angular JS application. The current API calls are quite intricate so I decided to make a direct call. Below is the code snippet for my new ...

javascriptangularjsxmlhttprequest

Ways to prevent ERR_INSUFFICIENT_RESOURCES when making AJAX requests

It's been a while since I dabbled in JavaScript, so please be patient with me. I'm currently developing an application that generates reports on student data using PHP as the backend. Periodically, we need to refresh the database used for these ...

javascriptphpjqueryajax

"Displaying array objects in a select dropdown menu - a step-by-step guide

I need assistance with displaying an array object in a select tag utilizing only AngularJS. Below is the structure of my array object: "matcherObject": { "Percentage Off": [ { "dealType": "Percentage Off", "subCategory": "16% to 20%", "recid ...

javascriptangularjs

How to position child divs at the center of a parent div

I am looking to set the maximum width of the "circlecontainer" to 300px, but I also want my 4 child divs (each with a max width of 300px) to remain centered in the browser when it exceeds a width of 1200px. Currently, they are aligned to the left side. Be ...

htmlcss

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

javascriptjquerycss

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

javascriptjqueryjsonhtml-table

passport not initializing session with requests

I am currently utilizing passportJS for managing login and persistent sessions on the server backend. While everything functions properly when sending requests from the server frontend (a webpage that I didn't create and lack sufficient knowledge to ...

javascriptnode.jssessionrequestpassport.js

Struggling to comprehend certain sections of code within AngularJS

I have been working through an AngularJS book to learn, but I am struggling with some code that is not well explained. The selectCategory() function is included in the ng-click directive like this: <a ng-click="selectCategory()">Home</a> < ...

javascriptangularjs

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

Modifying the default value setting in MUI Datepicker

Currently, I am utilizing version @mui/x-date-pickers ^6.17.0. Here is the custom date picker I am using: https://i.stack.imgur.com/k8nF1.png Upon clicking the input field, the placeholder switches and a value gets appended. However, modifying the input ...

javascriptreactjsmaterial-uidatepickermui-x-date-picker

Dealing with a 404 Error in Node.js and Express Routing

After successfully creating a Node/Express app tutorial earlier, I encountered issues when trying to replicate it for a new project on both Ubuntu and Windows. The basic routing consistently fails and results in 404 errors, which is incredibly frustrating! ...

javascriptnode.jsexpress

The process of manipulating the content of an HTML textarea using Selenium with Python

http://neomx.iwedding.co.kr/roundcube I attempted to change the content of a textarea, specifically the tracking number. My goal was to replace "9400111206213835724810" with "487289527385922090". However, I encountered an error message stating "ElementNot ...

pythonhtmlseleniumselenium-webdriver

What is the best way to store data from multiple selected rows in different datagrids into a single state?

Programming Languages : JavaScript with React, Redux Toolkit, and Material-UI Issue : My goal is to synchronize the selection of checkboxes across multiple datagrids into one central state Attempts Made : I first attempted to manage checkbox selection fo ...

javascriptreactjsmaterial-uiredux-toolkit

Issues with Angular ngroute: controllers are not functioning properly

In order to route my application with different themes on the same page, I plan to utilize the ngroute module. Here's an example of how I intend to achieve this: <html> <head> <title>Angular JS Views</title> ...

javascripthtmlangularjsngrouteroute-provider

Tips for Removing Copyright on Charts

Check this out : https://jsfiddle.net/oscar11/4qdan7k7/5/ Is there a way to eliminate the phrase JS chart by amCharts? ...

javascriptjquerycharts

What techniques can I utilize to ensure Azure function generates JSON specifically for web browsers?

I have a functioning Azure function with the following code: module.exports = function(context, req) { // this is the complete source code, believe it or not context.done(null, {favoriteNumber: 3}); }; When I utilize a tool like Postman to access ...

javascriptjsonnode.jsazureazure-functions